Question

我正在使用ExtJs 4，在西部区域使用Tree面板，在中心区域使用TreeGrid面板。有没有办法在选择treepanel（西）时过滤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

在天与这个问题作斗争之后，我终于能够获得功能，尽管不是那么令人满意。此外，目前仅隐藏叶节点。

过滤所有不提及＆＃34; text＆＃34;：

的节点

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中运行得很漂亮，但现在这些darn节点不再具有.ui.hide（）函数了。）

Answer 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的filters配置，不同地应用你的过滤器。您可以定义过滤器并将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代码未经测试，可能需要进行一些修改，但我认为这是做到这一点的方法。

ExtJs 4：树网格面板过滤器

2 个答案: