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();        }    }});