Extjs4.x Ext.tree.Panel 過濾Filter以及trigger field的使用

Extjs4.x中已經取消了組件Ext.Tree.TreeFilter功能，卻掉了樹形結構的過濾功能，要實現該功能只能自己寫了.

Tree節點篩選UI很簡單，一個Tbar，一個trigger即可解決問題，剩下的是邏輯代碼了。

1.tbar沒啥好解析的

2.trigger幾個比較重要的屬性

　　triggerCls：文本框右側的按鈕樣式，主要有4種　　

 

　　onTriggerClick：單擊右側按鈕的事件

　　emptyText：值爲空時候顯示的文字

　　hideTrigger：是否顯示觸發按鈕

　　更多請參考：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Trigger-cfg-hideTrigger

3.剩下最重要的一個是邏輯處理類

完整的案例代碼如下:

Ext.define("WMS.view.Tree", {
    extend: 'Ext.tree.Panel',
    alias: 'widget.wmsTree',
    id: 'wmsMenuTreePanel',
    title: "功能導航",
    margins: '0 0 0 3',
    width: 200,
    region: 'west',
    animate: true,
    store: 'VPTreeMenu',
    autoScroll: true,
    rootVisible: false,
    loadMsg: true,
    collapsible: true,//是否可以摺疊
    split: true,
    tools: [{
        type: 'expand',
        handler: function () { Ext.getCmp("wmsMenuTreePanel").expandAll(); }
    }, {
        type: 'collapse',
        handler: function () { Ext.getCmp("wmsMenuTreePanel").collapseAll(); }
    }],
　　//這裏不要忘記
    mixins: {
        treeFilter: 'WMS.view.TreeFilter'
    },
    tbar: [{
        xtype: 'trigger',
        triggerCls: 'x-form-clear-trigger',
        onTriggerClick: function () {
            this.setValue('');
            Ext.getCmp("wmsMenuTreePanel").clearFilter();
        },
        width:'100%',
        emptyText:'快速檢索功能',
        enableKeyEvents: true,
        listeners: {
            keyup: {
                fn: function (field, e) {
                    if (Ext.EventObject.ESC == e.getKey()) {
                        field.onTriggerClick();
                    } else {
                        Ext.getCmp("wmsMenuTreePanel").filterByText(this.getRawValue());
                    }
                }
            }
        }
    }]
});

　　

/**
 * Add basic filtering to Ext.tree.Panel. Add as a mixin:
 *  mixins: {
 *      treeFilter: 'WMS.view.TreeFilter'
 *  }
 */
Ext.define('WMS.view.TreeFilter', {
    filterByText: function(text) {
        this.filterBy(text, 'text');
    },
    /**
     * Filter the tree on a string, hiding all nodes expect those which match and their parents.
     * @param The term to filter on.
     * @param The field to filter on (i.e. 'text').
     */
    filterBy: function(text, by) {
        this.clearFilter();
        var view = this.getView(),
            me = this,
            nodesAndParents = [];
        // Find the nodes which match the search term, expand them.
        // Then add them and their parents to nodesAndParents.
        this.getRootNode().cascadeBy(function(tree, view){
            var currNode = this;

            if(currNode && currNode.data[by] && currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1) {
                me.expandPath(currNode.getPath());
                while(currNode.parentNode) {
                    nodesAndParents.push(currNode.id);
                    currNode = currNode.parentNode;
                }
            }
        }, null, [me, view]);
        // Hide all of the nodes which aren't in nodesAndParents
        this.getRootNode().cascadeBy(function(tree, view){
            var uiNode = view.getNodeByRecord(this);
            if(uiNode && !Ext.Array.contains(nodesAndParents, this.id)) {
                Ext.get(uiNode).setDisplayed('none');
            }
        }, null, [me, view]);
    },
    clearFilter: function() {
        var view = this.getView();
        this.getRootNode().cascadeBy(function(tree, view){
            var uiNode = view.getNodeByRecord(this);
            if(uiNode) {
                Ext.get(uiNode).setDisplayed('table-row');
            }
        }, null, [this, view]);
    }
});

　如果你想對節點的中文做些處理，例如按照拼音首字母進行搜索，只需要變更如下這句代碼即可

currNode.data[by].toString().toLowerCase().indexOf(text.toLowerCase()) > -1

WMS.view.TreeFilter