1、使用外部 TreeFilter.js 在项目中引用
Ext.define("Ext.ux.TreeFilter", { extend:"Ext.AbstractPlugin", alias:"plugin.treeFilter", collapseOnClear:true, allowParentFolders:false, init:function(tree) { var me = this; me.tree = tree; tree.filter = Ext.Function.bind(me.filter, me); tree.clearFilter = Ext.Function.bind(me.clearFilter, me); }, filter:function(value, property, re) { var me = this, tree = me.tree, matches = [], root = tree.getRootNode(), property = property || "text", re = re || new RegExp(value, "ig"), visibleNodes = [], viewNode; if (Ext.isEmpty(value)) { // if the search field is empty me.clearFilter(); return; } tree.expandAll(); // expand all nodes for the the following iterative routines // iterate over all nodes in the tree in order to evalute them against the search criteria root.cascadeBy(function(node) { if (node.get(property).match(re)) { // if the node matches the search criteria and is a leaf (could be modified to searh non-leaf nodes) matches.push(node); } }); if (me.allowParentFolders === false) { // if me.allowParentFolders is false (default) then remove any non-leaf nodes from the regex match Ext.each(matches, function(match) { if(match){ if (!match.isLeaf()) { Ext.Array.remove(matches, match); } } }); } Ext.each(matches, function(item, i, arr) { // loop through all matching leaf nodes root.cascadeBy(function(node) { // find each parent node containing the node from the matches array if (node.contains(item) == true) { visibleNodes.push(node); } }); if (me.allowParentFolders === true && !item.isLeaf()) { // if me.allowParentFolders is true and the item is a non-leaf item item.cascadeBy(function(node) { // iterate over its children and set them as visible visibleNodes.push(node); }); } visibleNodes.push(item); }); root.cascadeBy(function(node) { // finally loop to hide/show each node viewNode = Ext.fly(tree.getView().getNode(node)); // get the dom element assocaited with each node if (viewNode) { // the first one is undefined ? escape it with a conditional viewNode.setVisibilityMode(Ext.Element.DISPLAY); // set the visibility mode of the dom node to display (vs offsets) viewNode.setVisible(Ext.Array.contains(visibleNodes, node)); } }); }, clearFilter:function() { var me = this, tree = this.tree, root = tree.getRootNode(); if (me.collapseOnClear) { tree.collapseAll(); } root.cascadeBy(function(node) { // final loop to hide/show each node viewNode = Ext.fly(tree.getView().getNode(node)); // get the dom element assocaited with each node if (viewNode) { // the first one is undefined ? escape it with a conditional and show all nodes viewNode.show(); } }); } });
2、引用到模块中 有两种方式 1)、 引入插件 Ext.define('VideoPlaybackManager.view.RoadVideoMonitorView', { extend: 'Ext.panel.Panel', height: 3000, rtmpRoadAction: 'action2/systemunitinfo-rtmpRoadVideoInfo', treeAction: 'action2/systemunitinfo-RoadVideoTreeLoad', layout: { align: 'stretch', type: 'border' }, getCmp: function (itemid) { return this.query('[itemId=' + itemid + ']')[0]; }, requires:["Ext.ux.TreeFilter"], plugins : [{ ptype : 'treeFilter', border : false, allowParentFolders : true }],
items: [
Ext.create('Ext.tree.Panel', {
itemId:'searchTreeData',
id:'searchTreeData',
store: me.getTreeStore(),
title: '查询',
sortableColumns:false,
iconCls:'mag',
listeners:{
itemdblclick: function (view, record, item, index, e, eOpts) {
if (record.get('leaf')) { //叶子节点
var param={};
param.outFlag=Utils.isOuter;
param.deviceid=record.get('id');
me.controller.showVideo(param);
}
},
buffer:250
},
tbar:[
{xtype: 'trigger', emptyText: '快速检索', width:210,
triggerCls:'x-form-clear-trigger',
onTriggerClick:function () {
this.reset();
this.focus();
},
listeners:{
change:function (field,newVal) {
var tree=field.up("treepanel");
tree.filter(newVal)
},
buffer:250
}
}
],
rootVisible: false,
autoHeight : false,
autoScroll: false,
flex: 1,
})
]
2)、 直接创建出来
this.items = [
{
xtype: 'panel',
id: 'roadVideoTree',
layout: {
align: 'stretch',
type: 'vbox'
},
itemId: 'leftpanel',
frameHeader: true,
region: 'west',
split: true,
width: 290,
autoScroll: false,
items: [
Ext.create('Ext.tree.Panel', {
itemId:'searchTreeData',
id:'searchTreeData',
store: me.getTreeStore(),
title: '查询',
sortableColumns:false,
iconCls:'mag',
listeners:{
itemdblclick: function (view, record, item, index, e, eOpts) {
if (record.get('leaf')) { //叶子节点
var param={};
param.outFlag=Utils.isOuter;
param.deviceid=record.get('id');
me.controller.showVideo(param);
}
},
buffer:250
},
tbar:[
{xtype: 'trigger', emptyText: '快速检索', width:210,
triggerCls:'x-form-clear-trigger',
onTriggerClick:function () {
this.reset();
this.focus();
},
listeners:{
change:function (field,newVal) {
var tree=field.up("treepanel");
treeFilter.init(tree);
treeFilter.filter(newVal)
},
buffer:250
}
},
],
rootVisible: false,
autoHeight : false,
autoScroll: false,
flex: 1,
})
]
}
];