[Ext JS 4] multi-choice pull-down list (with checkbox)

Ext js is easy to create a multi-choice drop-down list. Use Ext. form. ComboBox and set multiSelect to true.

But how can I add a checkbox before each drop-down?

ComboBox does not have such configuration,

There is an extension like "Ext. ux. form. MultiSelect". If it works, all the options are displayed.

You can't expand only one such component on your own.

To achieve this display, you can use the listConfig configuration of ComboBox.

You can configure itemTpl of listConfig to display the Display Effect of each option,

      itemTpl : Ext.create('Ext.XTemplate',          '<input type=checkbox>{value}'),

The display effect is not described,

When selecting an option, the previous checkbox should be selected;

If a checkbox is selected, the previous checkbox is not selected.

The solution is to configure the listeners of itemclick in listConfig.

        listeners:{        itemclick:function(view, record, item, index, e, eOpts ){        var isSelected = view.isSelected(item);        var checkboxs = item.getElementsByTagName("input");        if(checkboxs!=null)        {        var checkbox = checkboxs[0];        if(!isSelected)        {        checkbox.checked = true;        }else{        checkbox.checked = false;        }        }        }        }    

The above method is available in the local store status.

var states2 = Ext.create('Ext.data.Store', {    fields: ['abbr', 'name'],    data : [        {"abbr":"AL", "name":"Alabama"},        {"abbr":"AK", "name":"Alaska"},        {"abbr":"AZ", "name":"Arizona"}        //...    ]});

However, a problem may occur when using ajax to retrieve store data.

     proxy: {         type: 'ajax',         url: '/users.json',         reader: {             type: 'json',             root: 'users'         }     },

If you click the drop-down list next time, the selected check box will be deselected.

The reason is that this method will update the combobox drop-down option (combobox), and try to add processing in the refresh and render events, and it will not work.

The final tracing code can be implemented by overwriting onItemSelect.

Ext.define('Ext.ux.MultiComboBox', {    extend: 'Ext.form.ComboBox',    alias: 'widget.multicombobox',    xtype: 'multicombobox',    initComponent: function(){    this.multiSelect = true;    this.listConfig = {      itemTpl : Ext.create('Ext.XTemplate',          '<input type=checkbox>{value}'),        onItemSelect: function(record) {            var node = this.getNode(record);              if (node) {                 Ext.fly(node).addCls(this.selectedItemCls);                                  var checkboxs = node.getElementsByTagName("input");                 if(checkboxs!=null)                 {                 var checkbox = checkboxs[0];       checkbox.checked = true;                 }              }        },        listeners:{        itemclick:function(view, record, item, index, e, eOpts ){        var isSelected = view.isSelected(item);        var checkboxs = item.getElementsByTagName("input");        if(checkboxs!=null)        {        var checkbox = checkboxs[0];        if(!isSelected)        {        checkbox.checked = true;        }else{        checkbox.checked = false;        }        }        }        }        }       this.callParent();    }});