Extjs下拉树组件

转： http://www.2cto.com/kf/201206/135007.html

 

/**
 *下拉树类(Jelly)
 */ 
Ext.define('Redm.commons.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) { 
        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; 
        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, 
            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 hasOwnProp = me.store.hasOwnProperty('getRootNode'); 
            record = value ? me.store.getNodeById(value) : (hasOwnProp ? me.store.getRootNode() : null); 
            me.setRawValue(record ? record.get(this.displayField) : ''); 
        }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(); 
        } 
    } 
}); 
使用示例代码

[javascript]
{ 
    name: 'smallType', 
    fieldLabel: '小类', 
    xtype: 'treecombox', 
    valueField: 'id', 
    displayField: 'text', 
    store: Ext.create('Ext.data.TreeStore', {  
        fields: ['text','id','parentId'], 
        root: { 
            text: '所有分类', 
            id: -1, 
            expanded: true 
        }, 
        proxy: {  
            type: 'ajax',  
            url: '../../basicdata/doQueryAllps.action' 
        } 
    }) 
} 
再来个效果图，下拉树的宽度可以自定义，更改属性 maxPickerWidth即可。