ExtJs 4: Фильтр панели дерева сетки - PullRequest
Новая
       46

ExtJs 4: Фильтр панели дерева сетки

1 голос
/ 10 сентября 2011

Я использую 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);      
    }

});

Ответы [ 2 ]

1 голос
/ 08 декабря 2011

После дней борьбы с этой проблемой я наконец-то смог получить функциональность, хотя и не столь удовлетворительным образом. Кроме того, в настоящий момент скрыты только конечные узлы.

фильтрация всех узлов, которые не упоминают "текст": 

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 ()).

0 голосов
/ 10 сентября 2011

я проверил их пример 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);
});

И назначить фильтр дляtreeStore в initComponent 

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

И в функции CenterTreeFilter 

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

Ps код не проверен и, вероятно, потребуется некоторые модификации, но я думаю, что это способ сделатьэто.

...