我修改了
Ext-Js网站中的过滤器示例,以便在树形网格中使用它。
Ext.define('TreeGridFilter', {
extend: 'Ext.grid.feature.Feature'
, alias: 'feature.treeGridFilter'
, collapseOnClear: true
, allowParentFolders: false
, treeGrid: null
, filterPropertyNames: new Array()
, filterPropertyValues: new Array()
, filterColumnRenderers: new Array()
, init: function (tree) {
var me = this;
treeGrid = me.tree = tree;
var view = me.view;
var headerCt = view.headerCt;
headerCt.on('menucreate', me.onMenuCreate, me);
tree.filter = Ext.Function.bind(me.filter, me);
tree.clearFilter = Ext.Function.bind(me.clearFilter, me);
}
,filter: function (value, property, re, columnRenderer) {
var me = this
, tree = me.tree
, matches = []
, root = tree.getRootNode()
, property = property || 'text'
, visibleNodes = []
, viewNode;
me.updateValueForName(property, value, columnRenderer);
if (me.filterPropertyNames.length == 0) {
me.clearFilter();
return;
}
tree.expandAll();
root.cascadeBy(function (node) {
var numberOfFiltersMatched = 0;
for (var index=0; index < me.filterPropertyNames.length; index++)
{
var propertyName = me.filterPropertyNames[index];
var propertyValue = me.filterPropertyValues[index]
var propertyValueOfNode = node.get(propertyName);
if(me.filterColumnRenderers[index] != false){
var renderingFunction = me.filterColumnRenderers[index];
propertyValueOfNode = renderingFunction(propertyValueOfNode);
}
var regExpn = new RegExp(propertyValue, "ig")
if(propertyValueOfNode != null && (propertyValueOfNode+'').match(regExpn)) {
numberOfFiltersMatched++;
}
}
if(numberOfFiltersMatched == me.filterPropertyNames.length){
matches.push(node);
}
});
if (me.allowParentFolders === false) {
Ext.each(matches, function (match) {
if (match == null || !match.isLeaf()) {
Ext.Array.remove(matches, match);
}
});
}
Ext.each(matches, function (item, i, arr) {
root.cascadeBy(function (node) {
if (node.contains(item) == true) {
visibleNodes.push(node);
}
});
if (me.allowParentFolders === true && !item.isLeaf()) {
item.cascadeBy(function (node) {
visibleNodes.push(node);
});
}
visibleNodes.push(item);
});
root.cascadeBy(function (node) {
viewNode = Ext.fly(tree.getView().getNode(node));
if (viewNode) {
viewNode.setVisibilityMode(Ext.Element.DISPLAY);
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) {
viewNode = Ext.fly(tree.getView().getNode(node));
if (viewNode) {
viewNode.show();
}
});
},
onMenuCreate: function(headerCt, menu) {
var me = this;
menu.on('beforeshow', me.onMenuBeforeShow, me);
},
onMenuBeforeShow: function(menu) {
var me = this;
var currentHeaderFilter = menu.activeHeader.filter;
if(currentHeaderFilter == null){
if(me.menuItem == null){
return;
}
me.menuItem.hide();
me.menuSeparator.hide();
}else if(me.menuItem != null){
me.menuItem.show();
me.menuSeparator.show();
}
if(me.menuItem){
var perviousFilterValue = me.getValueForName(menu.activeHeader.dataIndex);
if(perviousFilterValue == null || perviousFilterValue == ''){
me.menuItem.setRawValue('');
}else{
me.menuItem.setRawValue(perviousFilterValue);
}
}else{
me.menuSeparator = menu.add('-');
var filterTextFiels = new Ext.form.TextField({
itemId: 'filterTextBox',
cls : 'find-icon',
listeners: {
'change': this.onFilterTextChange
}
});
me.menuItem = menu.add(filterTextFiels);
}
me.menuItem.activeDataIndex = menu.activeHeader.dataIndex;
me.menuItem.activeRenderer = menu.activeHeader.renderer;
me.menuItem.width = (currentHeaderFilter == null || currentHeaderFilter.width == null) ? 150 : currentHeaderFilter.width;
},
onFilterTextChange : function (searchMenuItem, value) {
treeGrid.filter(value,searchMenuItem.activeDataIndex, null, searchMenuItem.activeRenderer);
},
updateValueForName : function(property, value, columnRenderer){
var propertyIndex = -1;
for (var index=0; index < this.filterPropertyNames.length; index++)
{
if(property == this.filterPropertyNames[index]){
propertyIndex = index;
break;
}
}
if(propertyIndex >= 0){
if(value == null || value == ''){
this.filterPropertyNames.splice(propertyIndex, 1);
this.filterPropertyValues.splice(propertyIndex, 1);
this.filterColumnRenderers.splice(propertyIndex, 1);
}else{
this.filterPropertyValues[propertyIndex] = value;
}
}else{
propertyIndex = this.filterPropertyNames.length;
this.filterPropertyNames[propertyIndex] = property;
this.filterPropertyValues[propertyIndex] = value;
this.filterColumnRenderers[propertyIndex] = columnRenderer;
}
},
getValueForName : function(property){
var propertyIndex = -1;
for (var index=0; index < this.filterPropertyNames.length; index++)
{
if(property == this.filterPropertyNames[index]){
propertyIndex = index;
break;
}
}
if(propertyIndex >= 0){
return this.filterPropertyValues[propertyIndex];
}else{
return null;
}
}
});
此功能可以在网格中使用。
var treeGridFilter = {
ftype: "treeGridFilter"
};
var treeGrid= Ext.create('Ext.tree.Panel', {
id : 'tree-grid-id',
title: 'View Tree Grid',
features: [treeGridFilter],
store: store,
renderTo: 'grid-div',
columns: [{
text: 'Column One',
dataIndex: 'columnOne',
filter : {
width: 150
}
},{
text: 'Column Two',
dataIndex: 'columnTwo',
filter : {
width: 100
}
}]
});
node.remove
时,存储器是否会尝试重新加载? - egerardus