PDA

View Full Version : Multiselect CombBox with check boxes



vvorobeychik
15 Aug 2012, 6:00 AM
I have a ComboBox with multiSelect set to true. I want to have the checkboxes along with each item in the combo box. I set a template for that, as shown in the code. But if you select an item outside the check box, item is selected, but the checkbox does not respond accordingly. Is there a way to link their behaviors?
Another question. When you select multiple items in the Combo, it forms the line with selected items separated by the delimiter (default is a comma). Is there a way to get count of the selected items and array of the selected records similar to the grid? I could not find that in the documentation.

Thank you in advance.
P.S. Suggestion. May be to include these functionalities in a future release?



var comboTPL = new Ext.XTemplate('<tpl for=".">',
'<div class="x-boundlist-item">',
'<input type="checkbox" />',
'{myValue}',
'</div>',
'</tpl>'
);
val1 = Ext.create('Ext.form.field.ComboBox', {id:'cmbId', store:myStore,
labelWidth:40, width:200, fieldLabel:'Value', multiSelect:true, queryMode:'local', tpl:comboTPL,
valueField:'myValue', displayField:'myValue', typeAhead:true
});

vvorobeychik
15 Aug 2012, 11:17 AM
I aws able to solve this isuue, I doubt it's nice, but it works.
First, I assigned an id for each combo I've created in the template:


var comboTPL = new Ext.XTemplate('<tpl for=".">',
'<div class="x-boundlist-item">',
'<input type="checkbox" id="{myValue}" />',
'{myValue}',
'</div>',
'</tpl>'
);

After it in the select event of the combo I used this id to check appropriate items


function CheckBoxStatus(combo, recs, opt)
{
var store = combo.getStore();
var i = 0;
// uncheck all
for(i = 0; i < store.getCount(); i++)
Ext.getDom(store.getAt(i).data.myValue).checked = false;
// Check selected
for(i = 0; i < recs.length; i++)
Ext.getDom(recs[i].data.myValue).checked = true;
}

I still lean to the suggestion to include this functionality in the future release of the multiple selection combo box.