We have ExtJs fields in which LabelAlign is configured as 'top', but when we click on label it focusses the field, this creates problem if the field is checkbox, as on click of checkbox label it checks/unchecks the checkbox field. I have searched for some configs to disable the same , but couldn't find out. Later i used pointer-events:none CSS property on labels but not sure it will be correct solution. please guide.
Fiddle Example illustrating the above issue
You can prevent the click on the label from affecting the checkbox by removing the for attribute from the label. This will break the association between the label and the checkbox. To do this in ExtJS:
Ext.query('label[id^=checkbox]').forEach(function (item) {
item.removeAttribute('for');
});
This will find all of the labels for checkboxes and remove the for attribute so the label is no longer associated with the checkbox.
If you want to implement this for all fields, not just checkboxes, change it to search for all labels:
Ext.query('label').forEach(function (item) {
item.removeAttribute('for');
});
This code should be executed after your form is created.
See updated fiddle here.
There is no as such solution as far as i know for that because it will happen in every field not only in checkbox but there is a workaround that, you can add two xtypes as label and field needed and arrange them in vbox layout and give that label a 'html' config as that fieldlabel of the next field.
For e.g,
{
xtype:'container',
layout:{
type:'vbox'
},
items:[
{
xtype:'label',
html:'Email Address'
},
{
xtype:'checkboxfield',
name: 'email'
}
]
}
With this the container that will be made by extjs for checkboxfield will be different for label and field so when you click on label that's a different control for it and hence won't check the checkboxfield.
Related
I have few Panels in my page, being created dynamically regarding the type of data that should be presenting.
I'd like to add checkbox to the title row of a particular panel. I identify this panel by it's properties (like it's name\ title and fields count).Then I add the checkbox like that:
newPanel.header.items = [
{
xtype: 'checkbox',
boxLabel: 'some text'
}
];
But for some reason, this checkbox is being render to all panels in the page.
I'm sure that the above code happening only once - I've put an alert to check that.
Can I avoid it and make the checkbox appears only on one specific panel?
Can someone point out that why checkbox appears in all of my dynamic panels there?
You should use the "add" method or the "setItems" method of the parent container (your header container I suppose), ie:
var myPanel = Ext.create('Ext.panel.Panel');
var myHeader = Ext.create('Ext.container.Container');
myPanel.add(myHeader);
myHeader.add({xtype: 'checkbox'});
Try below code
newPanel.getHeader().add({
xtype: 'checkbox',
boxLabel: 'Some Text'
});
Here is Fiddle for your reference.
how to add close icon to the combobox list items at right most
Ext.define('ezdi.view.SaveSearchComboboxView', {
extend : 'Ext.form.field.ComboBox',
alias : 'widget.saveSearchComboboxAlias',
queryMode : 'local',
id : 'saveSearchComboId',
store : 'SaveSearchComboboxStore',
emptyText : 'Saved Searches',
displayField : 'searchQueryName',
valueField : 'searchQueryId',
lazyInit: false
});
You can do this by adding triggerXCls and onTriggerXClick to specify any number of additional trigger icons, where "X" is the position of additional trigger.
For example, to add a "clear" icon, you might do something like:
{
...,
id: 'saveSearchComboId',
trigger1Cls: 'x-form-clear-trigger',
onTrigger1Click: function() {
this.clearValue();
}
}
Keep in mind there are only a few "default" trigger icons, which can be found here (for classic theme): ext/resources/ext-theme-classic/images/form. These each have their corresponding "x-form-XYZ-trigger" class. For a different trigger icon (like a "close" icon or an "add" icon), you'll need to create your own images as well as the appropriate CSS class that you can apply to triggerXCls.
See this tread for more info: http://www.sencha.com/forum/showthread.php?190886-How-to-reset-a-Combobox-or-Multiselect-to-no-values-selected
Can someone tell me how to get rid of the feature that filters combo box items.
when i click on the trigger of the combo, i want to display ALL menu items regardless of what text is already in the box, NOT filtered. I've tried several different config options with no luck.
make sense ?
for example, if i have 'View' as my text in the combo, and i click on the trigger, it will only show 'View1' and 'View2' items, i want it to include all the others...
Thanks!
heres my current config
{
...
items: [{
xtype: 'combo',
id: 'myViewsCombo',
emptyText: 'Select View',
selectOnFocus: true,
listeners: {
select: function(combo, record, index) {
L3.handlers.loadView(combo.value);
}},
store: ['View1', 'View2','blahblah']
}]
}
Setting triggerAction: "all" solved the same problem for me.
Try the setting the 'disableKeyFilter' config option to true.
See the ext combobox api.
In ExtJs I would like to achieve the equivalent of:
<input type="radio"><label><input type="text"></label>
Where the input box is associated to the radio button.
new Ext.form.RadioGroup({
id:"alerts",
items: [
new Ext.form.Radio({
boxLabel:'Now',
}),
new Ext.form.Radio({
boxLabel:'On',
})
]
);
I would like the "On" label to have a Ext.form.TextField next to it.
I have tried adding a Ext.form.TextField to the RadioGroup but it will not show (as I assume its because its not a Radio) and I am unable to add items to the Radio object.
Any advice apprecaited, thanks.
Add an <input/> element in the boxLabel, then on the RadioGroup render event create a TextField and apply it to that element
new Ext.form.RadioGroup({
id:"alerts",
items: [
{boxLabel: 'Now',},
{boxLabel: 'On <input id="on_date" type="text"/>'}, // contains <input/> id is "on_date"
],
listeners: {
change: function() {
// really, check if "on" was clicked
if(true) {
Ext.getCmp('on_date_field').focus();
} else {
// otherwise, disable the field?
}
},
render: function() {
new Ext.form.TextField({
id: 'on_date_field',
applyTo: 'on_date', // apply textfield to element whose id is "on_date"
});
}
}
});
I've confirmed that this works with TextField, and although I haven't tried it, it should work with DateField or ComboBox too. Also untested, but instead of creating an <input/>, you could create a container element and create the TextField and renderTo that element.
I don't think that's possible unless you override the RadioButton class and change its rendering logic (and I think that would be more complex than you would think to make a textfield render correctly the way you proposed). A better approach would be to simply add the radio and the textfield as two separate fields and link them programmatically. In Ext 3.2 you could use a CompositeField to do this easily. In the radio's handler fn you can set focus to its associated textbox or whatever other logic you'd need.
Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.