自己寫ExtJS 4控件： Combobox內嵌入Tree

Combobox內嵌入Tree，網上很多代碼，但大多屬於ExtJS 2或ExtJS 3，我沒有找到適用於ExtJS 4的代碼，由於ExtJS 4變化蠻大，所以網上的代碼都不能直接使用，不過沒關系，自己寫吧

看了網上的示例代碼，其實只要注意幾點即可

1、為Combobox的tpl插入一個帶有id的div

tpl ='<div id="tree"></div>'

 

2、寫Combobox的expand事件

當Combobox展開的時候，要讓tree展現到我們之前設置div內

這里要注意一個問題，需要判斷，如果tree已經展現過了，則不要重復render

me.on('expand', function () {
    if (!this.tree.rendered) {
        this.tree.render(this.treeid);
    }
});

 

3、寫tree的itemclick事件，實現tree選擇之后給Combobox賦值

首先要設置Combobox的displayField的值

this.displayField = this.displayField || 'text'

然后完成tree的itemclick事件，查API知道，itemclick的function如下

itemdblclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e, Object eOpts )

我們只需要用到前面2個參數即可，代碼如下

this.tree.on('itemclick', function (view, record) {
    me.setValue(record);
    me.collapse();//關閉combobox
});

 

我已經把嵌套tree的combobox寫成了一個component，完整代碼如下

Ext.define('TreeComboBox', {
    extend: 'Ext.form.field.ComboBox',

    url: '',
    tree: {},
    textProperty: 'text',
    valueProperty: '',

    initComponent: function () {
        Ext.apply(this, {
            editable: false,
            queryMode: 'local',
            select: Ext.emptyFn
        });

        this.displayField = this.displayField || 'text',
        this.treeid = Ext.String.format('tree-combobox-{0}', Ext.id());
        this.tpl = Ext.String.format('<div id="{0}"></div>', this.treeid);

        if (this.url) {
            var me = this;
            var store = Ext.create('Ext.data.TreeStore', {
                root: { expanded: true },
                proxy: { type: 'ajax', url: this.url }
            });
            this.tree = Ext.create('Ext.tree.Panel', {
                rootVisible: false,
                autoScroll: true,
                height: 200,
                store: store
            });
            this.tree.on('itemclick', function (view, record) {
                me.setValue(record);
                me.collapse();
            });
            me.on('expand', function () {
                if (!this.tree.rendered) {
                    this.tree.render(this.treeid);
                }
            });
        }
        this.callParent(arguments);
    }
});

 

前台代碼

Ext.create('TreeComboBox', {
    renderTo: Ext.getBody(),
    width: 400,
    url: '/models/tree-data.json'
});

無圖無真像，效果截圖

 

由於有了這個思路，那我們可以很容易的制作嵌入grid的combobox，而且也可以配合tree的filter，實現combobox的filter效果，這里特別指出，由於ExtJS 4去掉了TreeFitler，要實現fitler還比較麻煩，所以最簡單的就是我們自己寫一個treefilter，在完全完成這個treecombobox后，我會奉上完整代碼

 

由於接觸ExtJS時間太短，大家看我前面一篇文章就知道，所以如果有不對的地方，請指教