Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Как использовать фильтр в дереве ? ExtJS 3.4 (https://javascript.ru/forum/extjs/26193-kak-ispolzovat-filtr-v-dereve-extjs-3-4-a.html)

ICEMAN3141592 29.02.2012 17:37

Как использовать фильтр в дереве ? ExtJS 3.4
 
Подскажите, пожалуйста, как использовать фильтрацию узлов дерева в ExtJS 3.4 ? Создал Ext.tree.TreeFilter, но он проверяет только атрибут корня и все :(

Ex_Soft 01.03.2012 12:19

Насколько я понял c фильтрацией в дереве совсем плохо. Даже в 4-ке предлагаются прыжки с переподвыподвертом над Гибралтаром в виде добавления/удаления узлов, cascadeBy etc. Для 3-ки ж попробуйте Ext.ux.tree.TreeFilterX от Saki Мо удовлетворит...

miha-ha 01.03.2012 19:35

У меня так работает:
var config = {
            readOnly: false,
            isExpand: false,
            mode: 'local',
            treeFilter:  new Ext.tree.TreeFilter(this.getTree(), {
                autoClear: true,
                filterBy : function(fn, scope, startNode){
                    startNode = startNode || this.tree.root;
                    if(this.autoClear){
                        this.clear();
                    }
                    var found = {};
                    var af = this.filtered, rv = this.reverse;
                
                    var f = function(n){
                        if(n == startNode){
                            return true;
                        }
                        if(af[n.id]){
                            return false;
                        }
                        var m = fn.call(scope || n, n);
                        if(!m || rv){
                            af[n.id] = n;
                            //                        n.ui.hide();
                            //                        return false;
                            return true;
                        }
                    
                        found[n.id] = n;
                        return true;
                    };
                
                    startNode.cascade(f);
                
                    for(var idf in found){
                        if(typeof idf != "function"){
                            var curFoundItem = found[idf];
                            var p = curFoundItem.parentNode;
                            while(p){
                                delete af[p.id];
                                p = p.parentNode;
                            }
                        }
                    }
                
                    for(var id in af){
                        if(typeof id != "function"){
                            var n = af[id];
                            n.ui.hide();
                        }
                    }
                
                    //startNode.cascade(f2);
                
                    if(this.remove){
                        for(var id in af){
                            if(typeof id != "function"){
                                var n = af[id];
                                if(n && n.parentNode){
                                    n.parentNode.removeChild(n);
                                }
                            }
                        }
                    }
                }
            }),

            listeners: {
                scope: this,
                beforequery: function(){
                  return false;
                },
                keyup: {
                    fn: function(field, key){
                        if(!this.isExpand)
                            this.expand();
                        var value = field.getRawValue();
                        if(Ext.isEmpty(value) && !Ext.isEmpty(field.treeFilter)){
                            field.treeFilter.clear();
                            return;
                        }
                        var re = new RegExp('' + value + '', 'i');
                        var tree = field.getTree();
                        tree.expandAll();
                        field.treeFilter.filter(re);
                    },
                    buffer: 250
                }
            }
        }

ICEMAN3141592 02.03.2012 22:50

Спасибо большое всем за отзывчивость :thanks:
miha-ha, я сделал почти как Вы, но у Вас лучше структурирован код (не догадался так переопределить filterBy, пошел через переопределение prototype, а не экземпляра, так что Ваш безусловно лучше, также переопределил cascade)

ICEMAN3141592 02.03.2012 22:55

Чуть не в тему, но быть может кто знает, как сделать для
var triggerField = new Ext.form.TriggerField({
grow: true,
growMax: 800,
width: 350,
autoWidth: true,
fieldLabel: "Поиск",
triggerClass: "x-form-search-trigger",
enableKeyEvents: true
});
tbar: {
items: [
{
xtype: "tbtext",
text: "Поиск"
},
{
xtype: "tbspacer"
},
triggerField
]
}
чтобы текстовое поле расширялось по длине tbar, а не при фиксированной длине в 350 ?


Часовой пояс GMT +3, время: 10:40.