ExtJs 4：树网格面板过滤器

Question

我正在使用 ExtJs 4，在西部区域使用 Tree 面板，在中心区域使用 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);      
    }

});

Answer 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() 函数了）。

Answer 2

我检查了他们的示例 http://dev.sencha .com/deploy/ext-4.0.2a/examples/tree/treegrid.html，实际上这里的问题是treeGrid的存储是一个树存储，它没有方法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);

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