xtype:"multiselectfield",
fieldLabel:comboData.Label,
allowBlank:false,
labelAlign:"left",
autoScroll:false,
scroll:false,
width:280,
height:80,
store:comboStore,
value:comboData.selectvalue ? comboData.selectvalue : comboData.items[0].value,
displayField:"name",
valueField:"value",
You can do it using a combobox and setting multiSelect to true.
{
xtype: 'combobox',
multiSelect: true,
.
.
.
}
The value of the combobox will be an array of valueFields of the items selected.
Related
i am working in extjs4. I have view with component as=
xtype : 'comboboxselect',
id : 'Id1',
displayField: 'emailAddress',
typeAhead: true,
editable : true,
hideTrigger:true,
forceSelection: false,
i want to allow users to enter new emailIds also. So i kept editable as true. But when i am trying to get combobox's selected value on sumbit button click, its not giving me newly inserted emailsId's in combobox.I tries it as =
Ext.getCmp('Id1').getSubmitData() or Ext.getCmp('Id1').getRawValue()
But its not giving me newly inserted emailId's. So how to perform this in extjs4
If this is Ext.form.field.ComboBox (xtype:'combobox') then getValue() returns the current value of the combobox. More info available on sencha docs
I attempted to disable the combo box component with the disabled attribute however it's not working. The code is below:
xtype: 'bkl.exchange.ExchangeRFCombo',
disabled: true,
fieldLabel: 'Exchange',
id: 'exchMapee',
valueField: 'omsMappingCode',
editable: false
The mode is remote and not local. So the values displayed by the combo box is from the database. Is there a solution to this problem?
Your help is kindly appreciated.
Thank You.
You can add this to the combo box:
listeners: {
'afterRender': function () {
this.disable();
}
}
That will disable the box after being rendered.
Once an item is selected, how to disable the rest all items in multiSelect box. So that multiple items should not be selected. Multiselect box display values are:00.00A.M...11.00pm. For ex: if 01.00 am is selected rest all should be disabled though restricted to 1 selection box gets expanded double the existing width. following properties were used:
xtype:'multiselect',
id:'fromMultiselect',
name:'fromMultiselect',
columnWidth: .33,
maxSelections:1,
initValues : true,
hideLabel : true,
width : 130,
height : 90,
allowBlank : false,
disabled: false,
mode:'local',
store : FromTimeStore ,
valueField : 'id',
displayField : 'displayFromTime',
columnWidth: .32
Why not use combobox with multiselect:false and expand it after render?
Nevetheless you can still use multiselect:
add option: maxSelections: 1,
Example here (you must uncomment maxSelections property):
http://dev.sencha.com/deploy/ext-4.0.1/examples/multiselect/multiselect-demo.js
http://dev.sencha.com/deploy/ext-4.0.1/examples/multiselect/multiselect-demo.html
I'm looking for EXTJS4 combobox control which allows selecting multiple items via checkboxes inside.
Actually I need this control http://lovcombo.extjs.eu/ but it is implemented for ExtJs3. I tried to convert it to ExtJs4 but the task is not trivial actually.
Could you suggest similar component for ExtJs4. Or maybe you could point me to some tutorial or example - how to do such things?
Multiselect combo with checkbox in ExtJS4.0 can be achieved with addition few lines of code.
Basically you need to make use of the existing css class which get applied during selection and deselection of an item and pushing an image (checkbox image) at that time accordingly.
"x-boundlist-item" and "x-boundlist-selected" are the classes taken from ext-all.css.
<style>
.x-boundlist-item img.chkCombo {
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}
</style>
<head>
Ext.create('Ext.form.ComboBox', {
id: 'BCCAddress',
name: 'BCCAddress',
maxHeight: 150,
width: 210,
multiSelect: true,
emptyText : "Select Bcc email addresses",
renderTo: 'extBCCAddress',
store: myArrayStore,
displayField: 'fieldName',
valueField: 'fieldName',
forceSelection: true,
editable: false,
mode: 'local',
triggerAction: 'all',
listConfig : {
getInnerTpl : function() {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
}
}
});
[below is an image of this custom component]
use this: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox
or this: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
-- use grid with checkboxselectmodel in combox
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.