ExtJs ComBox下拉树

ExtJs ComBox下拉树 从网上例子改造而成

定义:

Ext.define('TeaComboTreeBox', {
    extend: 'Ext.form.field.ComboBox',
    multiSelect: false,  //控制单选,多选
    fieldLabel: '教师',
    labelWidth: 35,
    emptyText: '全部',
    displayField: 'text',
    valueField: 'id',
    createPicker: function () {
        var me = this;
        var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'UserTree.aspx'
            },
            root: {
                text: '教师',
                id: 'AE7613CF-6F6A-4D2C-82EA-32C1D640C23B',
                expanded: true
            },
            folderSort: false
        });

        var picker = Ext.create('Ext.tree.Panel', {
            store: store,
            rootVisible: false,
            selModel: {
                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;
    }
});

使用:

Ext.create('TeaComboTreeBox', { id: 'teacombox' })

其中

UserTree.aspx 返回树结构的JSON数据