Extjs5 tree扩展----treepanel树组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Extjs5 tree扩展----treepanel树组件相关的知识，希望对你有一定的参考价值。
Ext.define(‘MyExtend.lib.TreeFilter‘, {
filterByText: function(text) {
this.filterBy(text, ‘text‘ );
},
/**
* 根据字符串过滤所有的节点，将不符合条件的节点进行隐藏.
* @param 查询字符串.
* @param 要查询的列.
*/
filterBy: function(text, by) {
this.clearFilter();
var view = this .getView(),
me = this,
nodesAndParents = [];
// 找到匹配的节点并展开.
// 添加匹配的节点和他们的父节点到nodesAndParents数组.
this.getRootNode().cascadeBy(function(tree, view) {
var currNode = this;
// alert(currNode.data[by]+‘ ‘+by+‘ ‘+text);
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]);
// 将不在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]);
}
});
Ext.define(‘MyTreePanel‘,{
extend: ‘Ext.tree.Panel‘,
mixins:[ ‘MyExtend.lib.TreeFilter‘]
});
var treePanel = Ext.create( ‘MyTreePanel‘, {
id: ‘tree-panel‘,
title: ‘Sample Layouts‘,
region: ‘center‘,
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store
});
以上是关于Extjs5 tree扩展----treepanel树组件的主要内容，如果未能解决你的问题，请参考以下文章
[ExtJS5学习笔记]第十三节 Extjs5的Ext.each方法学习
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用