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: '快速检索', 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,
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: '快速检索', 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,
})
]
}
];