Extjs4.x Ext.tree.Panel 过滤Filter以及trigger field的使用

Extjs4.x中已经取消了组件Ext.Tree.TreeFilter功能,却掉了树形结构的过滤功能,要实现该功能只能自己写了.

Extjs4.x Ext.tree.Panel 过滤Filter以及trigger field的使用

Tree节点筛选UI很简单,一个Tbar,一个trigger即可解决问题,剩下的是逻辑代码了。

1.tbar没啥好解析的

2.trigger几个比较重要的属性

  triggerCls:文本框右侧的按钮样式,主要有4种  

x-form-clear-trigger     // the X icon

x-form-search-trigger    // the magnifying glass icon

x-form-trigger           // the down arrow (default for combobox) icon

x-form-date-trigger      // the calendar icon (just in case)

 

  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

你可能感兴趣的:(trigger)