ext 下拉多选树

下拉树：

页面引入 ： ComboTreeBox.js  源码如下：  

Ext.define('ComboTreeBox',{

extend : 'Ext.form.field.ComboBox',

//multiSelect : false,
multiSelect : true,
//readOnly: true ,
createPicker : function(){
var me = this;

//创建树控件
var picker = Ext.create('Ext.tree.Panel', {
   store: me.store,
   //xtype: 'check-tree',
   rootVisible: false,
   selModel: {
                    //mode: me.multiSelect ? 'SINGLE' : 'SINGLE'
    mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'  
                },
   
   floating: true,
            hidden: true,
            focusOnToFront: false
});
//注册事件用于选择用户选择的值
me.mon(picker, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });
        
        me.mon(picker.getSelectionModel(), {
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            selectionchange: me.onListSelectionChange,
            scope: me
        });
this.picker = picker;
return picker;
},

onItemClick: function(picker, record){
        /*
         * If we're doing single selection, the selection change events won't fire when
         * clicking on the selected element. Detect it here.
         */
        var me = this,
            selection = me.picker.getSelectionModel().getSelection(),
            valueField = me.valueField;


        if (!me.multiSelect && selection.length) {
            if (record.get(valueField) === selection[0].get(valueField)) {
                // Make sure we also update the display value if it's only partial
                me.displayTplData = [record.data];
                me.setRawValue(me.getDisplayValue());
                me.collapse();
            }
        }
    }

});

页面调用：

 var multiComboQueryParams = Ext.create('ComboTreeBox',{
  fieldLabel : '查询条件参数',
  renderTo : Ext.getBody(),
  store : Ext.create('Ext.data.TreeStore', {
     root: {
         expanded: true,
         children: [
             { text: "节点1", leaf: true,checked:true },
             { text: "节点2", expanded: true,checked:true},
             { text: "节点5", leaf: true ,checked:true}
         ]
     }
  }),
  queryMode: 'local'
  });

下拉表格：

引入ComboGridBox.js文件源码如下：

Ext.define('ComboGridBox',{
extend : 'Ext.form.field.ComboBox',

multiSelect : true,

createPicker : function(){
var me = this;

var picker = Ext.create('Ext.grid.Panel', {
title : '下拉表格',
   store: me.store,
   frame : true,
   resizable : true,
   columns : [{
    text : '#ID',
    dataIndex : 'id'
   },{
    text : '名称' ,
    dataIndex : 'name'
   },{
    text : '描述' ,
    dataIndex : 'desc'
   }],
   selModel: {
                mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
            },
   floating: true,
            hidden: true,
            width : 300,
            columnLines : true,
            focusOnToFront: false
});
me.mon(picker, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });


        me.mon(picker.getSelectionModel(), {
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            selectionchange: me.onListSelectionChange,
            scope: me
        });
this.picker = picker;
return picker;
},

onItemClick: function(picker, record){
        /*
         * If we're doing single selection, the selection change events won't fire when
         * clicking on the selected element. Detect it here.
         */
        var me = this,
            selection = me.picker.getSelectionModel().getSelection(),
            valueField = me.valueField;


        if (!me.multiSelect && selection.length) {
            if (record.get(valueField) === selection[0].get(valueField)) {
                // Make sure we also update the display value if it's only partial
                me.displayTplData = [record.data];
                me.setRawValue(me.getDisplayValue());
                me.collapse();
            }
        }
    },
    
    matchFieldWidth : false,
    
    onListSelectionChange: function(list, selectedRecords) {
        var me = this,
            isMulti = me.multiSelect,
            hasRecords = selectedRecords.length > 0;
        // Only react to selection if it is not called from setValue, and if our list is
        // expanded (ignores changes to the selection model triggered elsewhere)
        if (!me.ignoreSelection && me.isExpanded) {
            if (!isMulti) {
                Ext.defer(me.collapse, 1, me);
            }
            /*
             * Only set the value here if we're in multi selection mode or we have
             * a selection. Otherwise setValue will be called with an empty value
             * which will cause the change event to fire twice.
             */
            if (isMulti || hasRecords) {
                me.setValue(selectedRecords, false);
            }
            if (hasRecords) {
                me.fireEvent('select', me, selectedRecords);
            }
            me.inputEl.focus();
        }
        console.log(me.getValue());
    },
    
    doAutoSelect: function() {
        var me = this,
            picker = me.picker,
            lastSelected, itemNode;
        if (picker && me.autoSelect && me.store.getCount() > 0) {
            // Highlight the last selected item and scroll it into view
            lastSelected = picker.getSelectionModel().lastSelected;
            itemNode = picker.view.getNode(lastSelected || 0);
            if (itemNode) {
                picker.view.highlightItem(itemNode);
                picker.view.el.scrollChildIntoView(itemNode, false);
            }
        }
    }
    
    
});