ExtJs 4：树形网格面板过滤器答案

【问题标题】：ExtJs 4 : Tree grid panel filterExtJs 4：树形网格面板过滤器
【发布时间】：2011-11-14 06:29:58
【问题描述】：

我正在使用 ExtJs 4，在西部区域使用 Tree 面板，在中心区域使用 TreeGrid 面板。有没有办法在选择树面板（西）时过滤 TreeGrid 面板（中心区域）？？

我尝试了以下但没有运气：

Ext.define('MyApp.view.MyViewport', {
    extend: 'MyApp.view.ui.MyViewport',

 initComponent: function() {

        var me = this;
        me.callParent(arguments);   
        me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me);

}, //end of initComponent

CenterTreeFilter: function(){

    var selection = this.down('#westTreePanel').getView().getSelectionModel().getSelection()[0];
    var centerTreeGrid = this.down('#centerTreeGrid');
    console.log(selection.data.text);

    centerTreeGrid.store.filterBy(function(rec, id){
         console.log(rec);
         return (rec.store("text") == selection.data.text);
    });
    console.log("sub store : " + this.down('#centerTreeGrid').getStore().storeId);      
    }

});

【问题讨论】：

你也可以从控制台发布日志吗？
nscrob : 当然.. 这是控制台日志 :: Single Product Packs MyViewport.js: sub store : centerTreeGridStore .. 它不在 filterBy 函数中。
me.down('#westTreePanel').getSelectionModel().on('selectionchange',me.CenterTreeFilter,me);从这条线我是带有布局边框的容器......但是这条线到底在哪里被调用？它应该在组件的 initConfig 中.. 因为在我看来没有调用 centertreefilter .. 是 console.log(selection.data.text);被展示？ ?
我已经编辑并提供了完整的参考代码。 console.log(rec) 没有执行

标签： extjs4 treegrid treepanel

【解决方案1】：

在解决这个问题天之后，我终于能够获得该功能，尽管以一种不太令人满意的方式。此外，目前只有叶节点是隐藏的。

过滤所有未提及“文本”的节点：

t.getRootNode().cascadeBy(function(n){
    if (!n.hasChildNodes() && 
        n.raw && n.raw.text.toLowerCase().indexOf(text.toLowerCase()) < 0) {
        toRemove.push({ node: n, parent: n.parentNode });
    }
});

要稍后恢复，请运行：

function restoreTrees() {
    for (var n in toRemove) {
        toRemove[n].parent.appendChild(toRemove[n].node);
    }
    toRemove = [];
}

这个解决方案有很多缺陷。包括恢复的树的节点可能会有不同的排序。但是，嘿，至少这是一些进步。

希望看到更好的！（如果它在 Ext JS 3 中运行良好，但现在这些该死的节点不再有 .ui.hide() 函数了）。

【讨论】：

【解决方案2】：

我检查了他们的示例http://dev.sencha.com/deploy/ext-4.0.2a/examples/tree/treegrid.html，实际上这里的问题是 treeGrid 的存储是一个树存储，它没有方法 filterBy ，方法 filterBy 定义在 ext.data.store 和treeStore 扩展了 ext.data.abstractStore .. 正如我所见，您必须使用 treeStore 的过滤器配置以不同的方式应用过滤器。您可以定义您的过滤器并将 filterOnLoad 设置为 true，而不是调用 filterBy 方法执行 centerTreeGrid.store.fireEvent('load',selection)。希望对你有帮助

编辑我没有为树店使用过滤器，但我认为你可以做这样的事情

var treeFilter = new Ext.util.Filter({
    filterFn: function(rec) {
    console.log(rec);
    return (rec.store("text") == selection.data.text);
});

并将过滤器分配给initComponent中的treeStore

 centerGrid.store.filters.add(treeFilter);
 centerGrid.store.filterOnLoad = true;

并且在CenterTreeFilter函数中

 centerGrid.store.fireEvent('load',selection);

P.s 代码未经测试，可能需要一些修改，但我认为这是这样做的方法。

【讨论】：

我想在选择 westTree 中的项目时过滤 centerTreeGrid。如何在 extjs 4 中定义相同的过滤器？