combox tree带参数

最新推荐文章于 2023-06-19 09:11:09 发布

zhengyuechuan

最新推荐文章于 2023-06-19 09:11:09 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhengyuechuan/article/details/12753479

本文介绍如何使用 ExtJS 框架实现一个可展开的树形组合框组件，该组件可以方便地用于选择层级结构的数据项。文章详细解释了组件的配置参数及其工作原理，并提供了实际应用的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Sharera.view.keyword.comBoxTree.js

Ext.define('Sharera.view.keyword.comBoxTree', {   
    extend: 'Ext.form.field.Picker',   
    xtype: 'treecombox',   
    triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',   
    config: {   
        displayField: null,   
        columns: null,   
        rootVisible: false,   
        selectOnTab: true,   
        firstSelected: false,   
        maxPickerWidth: 300,   
        maxPickerHeight: 350,   
        minPickerHeight: 80   
    },   
    autoScroll:true,  
    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.setRawValue(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();   
        }   
    }   
});

view中添加：注入了area。

						                        fieldLabel:'地区',
						                        flex:1,
											    xtype: 'treecombox',   
						                        valueField: 'value',   
						                        displayField: 'value', 
						                        width:'80%',
						                        name:'area',
						                        key:'area',
						                        store:Ext.create('Sharera.store.keyword.keywordTree',{key:'area'})

store中：

Ext.define("Sharera.store.keyword.keywordTree",{ 
	autoLoad : false,
	autoSync : false,
	key:'',
    extend: 'Ext.data.TreeStore',
    model: 'Sharera.model.keyword.keyword',
    nodeParam:'id',  
    baseUrl:context+'api/keyword/tree.json',
    root: {   
        name:'所有',  
        id: 'root',   
        expanded: true   
    },   
    proxy: {    
        type: 'ajax',    
        url:context+'api/keyword/tree.json'
    },
    listeners: {
        beforeload: function(store) {
            store.proxy.url = this.baseUrl + "?key="+this.key;
        }
    }
});