ExtJS Combo with checkboxes

For checkboxes inside combobox I am using:

AOEDComboAssociationName = new Ext.form.ComboBox({
  id: 'AOEDComboAssociationName',
  store: AOEDstoreAssociationName,
  displayField: 'Name',
  valueField: 'Id',
  typeAhead: true,
  mode: 'local',
  emptyText: '',
  selectOnFocus: true,
  triggerAction: 'all',
  width: 220,
  tpl: new Ext.XTemplate('<tpl for=".">'
        + '<div class="search-item" >'
        + '<input type="checkbox" class=" x-form-checkbox x-form-field">&nbsp;{Name}'
        + '</div></tpl>'
        )
}开发者_StackOverflow社区)

its displaying checkboxes along with display field of combo, but when I select one item combo automatically collapsed, so again click on combo for select multiple(another item)

How can I check more than once?

---

How can I check more than once?

Set this in the combobox:

multiSelect: true

---

It's a totally a hack but I think you could override in your subclass

// private
onSelect : function(record, index){
    if(this.fireEvent('beforeselect', this, record, index) !== false){
        this.setValue(record.data[this.valueField || this.displayField]);
        this.collapse();
        this.fireEvent('select', this, record, index);
    }
},
//…

with

// private
onSelect : function(record, index){
    if(this.fireEvent('beforeselect', this, record, index) !== false){
        this.setValue(record.data[this.valueField || this.displayField]);
        //this.collapse();
        this.fireEvent('select', this, record, index);
    }
},
//…

If you don't want to override anything you can always cancel the onSelect code by returning false in the 'beforeselect' event, but you'd have to do something with the setValue() and the fireEvent('select') by yourself.

---

I've solved this problem of my ComboBox (with multiselection) this way.. My store and several-properties of ComboBox was defined as:

            queryMode: 'local',
            multiSelect: true,
            valueField: 'id',
            displayField: 'name',
            store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'name'],
                    data: [
                        {id: 'FR', name: 'France'},
                        {id: 'BL', name: 'Belgium'},
                        {id: 'CH', name: 'Croatia'},
                    ]
                })

Then my TPL in ComboBox was defined as:

tpl: new Ext.XTemplate(
   '<tpl for=".">',
      '<div onclick="checkedReverse(this)" class="x-boundlist-item">',
         '<input type="checkbox" class="x-form-checkbox"/>',
      '{name}</div>',
   '</tpl>'
   )

which replaced the normal item <li class="x-boundlist-item"> of 'Ext.form.ComboBox' with <div class="x-boundlist-item"> inside which exist <input type="checkbox">

In this way, <checkbox> inside <div>-clicking-Area and it gives us the desired selection. But, when we click not on checkbox, on another area in <div>, then it gives us the desired selection, but now our checkbox not reacts (he is still selected). So, that's why i set the property in div-element onclick="checkedReverse(this), which defined in my .jsp as:

<script>
    function checkedReverse(el) {
        el.children[0].checked = !el.classList.contains("x-boundlist-selected");
    }
</script>

It gives us feedback-communication & necessary functional and now our ComboBox reacts on all clicks.