Ext Combobox 動態下拉樹實現

 

在最近的一個項目中，想利用Ext combobox實現一個動態的下拉樹，無奈官方中也沒有例子，網上很多例子也是坑爹的，， 決定自已修改 然後實現一個動態的下拉樹，廢話少說 ，看代碼：

---

Ext.ns('Boat.UI');
// 樹形下拉框
Boat.UI.TreeCombox = Ext.extend(Ext.form.ComboBox, {
            store : new Ext.data.SimpleStore({
                        fields : [],
                        data : [[]]
                    }),
            editable : false,
            mode : 'local',
            triggerAction : 'all',
            emptyText : '請選擇...',

            treeConfig : {
                border : false,
                autoScroll : true,
                height : 200
            },
            initComponent : function() {
                this.hiddenName = this.name;
                Ext.apply(this.tree, this.treeConfig);
                this.tpl = '<div id="tree-' + this.id + '"></div>';

                Boat.UI.TreeCombox.superclass.initComponent.call(this);
                this.on('expand', this.expandtree, this);
                this.tree.on('click', this.clicktree, this);
            },
            onViewClick : Ext.emptyFn,
            assertValue : Ext.emptyFn,
            expandtree : function() {
                this.tree.render('tree-' + this.id);
                this.tree.expand();
            },
            clicktree : function(node) {
             this.setValue(node);
                    this.collapse();
                     //如果要需求是單獨葉節點可選時 可這樣做
                  /*if (node.isLeaf()) {
                    this.setValue(node);
                    this.collapse();
                }*/
            },
            setValue : function(v) {
                this.hiddenField.value = v.id;
                Ext.form.ComboBox.superclass.setValue.call(this, v.text);
                this.value = v.id;
            },
            onDestroy : function() {
                this.un('expand', this.expandtree, this);
                Ext.destroy(this.tree);
                Boat.UI.TreeCombox.superclass.onDestroy.call(this);
            }
        });
Ext.reg('treecombobox', Boat.UI.TreeCombox);

---

下面是應用

{ x : 30,
y : 35,
 xtype : 'treecombobox', //上面註冊的 treecombobox
name:'parentId', //提交到後臺得數據
tree : categorytree //指定要加載的樹
}

---

樹的加載 ，採用動態加載 需要的才加載上來，

var treeLoader = new Ext.tree.TreeLoader({
                dataUrl : './Category/getTreeCategory.action',
                baseParams : {}
            });

    var treenode = new Ext.tree.AsyncTreeNode({
                id : 'root',
                text : '類別',
                leaf : false
            });
    /**
     * treeloader 加載之前根據參數 parendId動態加載樹節點
     */
    treeLoader.on('beforeload', function(loader, node) {
                loader.baseParams.parentId = (node.attributes.id == 'root'
                        ? 0
                        : node.attributes.id);
            })
    var categorytree = new Ext.tree.TreePanel({
                animate : true,
                border : false,
                loader : treeLoader,
                root : treenode
            });