PDA

View Full Version : Extjs 4 Combobox with check boxes and select All option



Snow White
30 Jan 2014, 5:45 PM
I need to implement Lovcombo in extjs 4. My requirement is that a combobox inside that checkbox to select multiple options

1) "Select All" option should be in check box. If I check "select All" all the other options should be checked

2) if I uncheck "select all" all the other options should be unchecked

3) If I checked all the other options except "select All" this "select All" option should be checked automatically

4) then If I uncheck any one option that option along with "select All" should be unchecked

Could any one plzz help me to find out the solution for this

palakurthivishal
31 Jan 2014, 2:34 AM
Hello Snow White,
Try this snippet, it might be helpful for a work around.


// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});




// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
itemId : 'comboField',
multiSelect : true,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});
Ext.create('Ext.container.Container', {
layout : 'hbox',
items : [{
xtype : 'checkbox',
height : 16,
width : 16,
listeners : {
change : function(cmp, newVal, oldVal){

var combo = Ext.ComponentQuery.query('#comboField')[0];
var records = combo.getStore().getRange();
if(newVal){

combo.setValue(records, false);
}
else
combo.setValue([], false);

}
}
},combo],
renderTo : Ext.getBody()
});