EXTJS多选下拉树

本组件是由单选下拉数改的，单选下拉树博客地址：http://blog.csdn.net/hao_ds/article/details/50522058

/**
 *下拉树类(Jelly)
 */
Ext.define('Ext.ux.TreeCombox', {
    extend: 'Ext.form.field.Picker',
    xtype: 'treecombox',
    triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
    config: {
        displayField: null,
        columns: null,
        rootVisible: true,
        selectOnTab: true,
        firstSelected: false,
        maxPickerWidth: 300,
        maxPickerHeight: 360,
        minPickerHeight: 100
    },
    editable: false,
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        this.addEvents('select');
        me.store.on('load', me.onLoad, me);

    },
    createPicker: function () {
        var me = this,
            picker = Ext.create('Ext.tree.Panel', {
                store: me.store,
                floating: true,
                hidden: true,
                width: me.maxPickerWidth,
                displayField: me.displayField,
                columns: me.columns,
                maxHeight: me.maxTreeHeight,
                shadow: false,
                rootVisible: me.rootVisible,
                manageHeight: false,
                listeners: {
                    itemclick: Ext.bind(me.onItemClick, me)
                },
                viewConfig: {
                    listeners: {
                        render: function (view) {
                            view.getEl().on('keypress', me.onPickerKeypress, me);
                        }
                    }
                }
            }),
            view = picker.getView();

        view.on('render', me.setPickerViewStyles, me);
        if (Ext.isIE9 && Ext.isStrict) {
            view.on('highlightitem', me.repaintPickerView, me);
            view.on('unhighlightitem', me.repaintPickerView, me);
            view.on('afteritemexpand', me.repaintPickerView, me);
            view.on('afteritemcollapse', me.repaintPickerView, me);
        }
        return picker;
    },
    setPickerViewStyles: function (view) {
        view.getEl().setStyle({
            'min-height': this.minPickerHeight + 'px',
            'max-height': this.maxPickerHeight + 'px'
        });
    },
    repaintPickerView: function () {
        var style = this.picker.getView().getEl().dom.style;
        style.display = style.display;
    },
    alignPicker: function () {
        var me = this,
            picker;

        if (me.isExpanded) {
            picker = me.getPicker();
            if (me.matchFieldWidth) {
                picker.setWidth(this.picker.getWidth());
            }
            if (picker.isFloating()) {
                me.doAlign();
            }
        }
    },
    onItemClick: function (view, record, node, rowIndex, e) {

        if (record.isLeaf()) {
            var checked = !record.data.checked;
            record.set('checked', checked);
            //this.onCheckChange(record, checked);
            this.selectItem(record);

        }

    },
    onPickerKeypress: function (e, el) {
        var key = e.getKey();

        if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
            this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
        }
    },
    selectItem: function (record) {
        var me = this;
        var records = me.picker.getView().getChecked();     //当前所有选中节点
        values = [];
        Ext.Array.each(records,
        function (rec) {
            //names.push(rec.get('text'));
            values.push(rec.get('id'));
        });
        me.setValue(values.join(','));

        //me.setValue(record.get(this.valueField || 'id'));
        me.picker.hide();
        me.inputEl.focus();
        me.fireEvent('select', me, record)
    },

    onExpand: function () {
        var me = this,
            picker = me.picker,
            view = picker.getView(),
            store = picker.store,
            value = me.value,
            node;
        var records = me.picker.getView().getChecked();     //当前所有选中节点

        //取消选择当前已选择节点
        Ext.Array.each(records,
            function (rec) {
                rec.set('checked', false);
            });


        var valueList = value.split(',');
        if (valueList.length > 0) {

            for (var i = 0; i < valueList.length; i++) {
                node = store.getNodeById(valueList[i]);
                node.set('checked', true);
                var nodePath = node.getPath('id');
                picker.getComponentLayout().owner.expandPath(nodePath, 'id');
            }
        }


        Ext.defer(function () {
            view.focus();
        }, 1);
    },

    //onExpand: function () {
    //    var me = this,
    //        picker = me.picker,
    //        store = picker.store,
    //        value = me.value;
    //    if (value) {
    //        var node = store.getNodeById(value);
    //        if (node)
    //            picker.selectPath(node.getPath());
    //    } else {
    //        var hasOwnProp = me.store.hasOwnProperty('getRootNode');
    //        if (hasOwnProp)
    //            picker.getSelectionModel().select(store.getRootNode());
    //    }

    //    Ext.defer(function () {
    //        picker.getView().focus();
    //    }, 1);
    //},



    setValue: function (value) {
        var me = this, record;
        me.value = value;
        if (me.store.loading) {
            return me;
        }
        try {
            var rawValueList = new Array();
            if (value) {
                var valueList = value.split(',');
                for (var i = 0; i < valueList.length; i++) {
                    var rec = me.store.getNodeById(valueList[i]);
                    if (rec)
                        rawValueList[i] = rec.get(me.displayField)
                }

                me.setRawValue(rawValueList.join());
                //var hasOwnProp = me.store.hasOwnProperty('getRootNode');
                //record = value ? me.store.getNodeById(value) : (hasOwnProp ? me.store.getRootNode() : null);
                //me.setRawValue(record ? record.get(this.displayField) : '');
            } else {
                me.setRawValue('');
            }
        } catch (e) {
            me.setRawValue('');
        }

        return me;
    },
    getValue: function () {
        return this.value;
    },
    onLoad: function (store, node, records) {
        var value = this.value;
        if (value) {
            this.setValue(value);
        } else {
            if (this.firstSelected) {
                if (records && records.length > 0) {
                    var record = records[0];
                    this.setValue(record.get(this.valueField));
                }
            }
        }
    },
    getSubmitData: function () {
        var me = this,
            data = null;
        if (!me.disabled && me.submitValue) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        return data;
    },
    onTriggerClick: function () {
        var me = this;
        //me.store.load();
        if (!me.readOnly && !me.disabled) {
            if (me.isExpanded) {
                me.collapse();
            } else {
                me.expand();
            }
            me.inputEl.focus();
        }
    }
});