ignar's log

ExtJS Tree и Ext.utils.Observable

Август 29th, 2009 от admin Оставить свое мнение »

ExtJS
Понадобилось кастомизировать дерево в extjs, обрабатывать ивенты только при нажатии на ветку, а не на узел.

Сразу кусочек кода с приложения:

panelNavigation = Ext.extend(Ext.tree.TreePanel,{
        	constructor: function(config){
        	panelNavigation.superclass.constructor.call(this,
                Ext.apply({
                    id: 'navigation',
                    title: 'Навигация',
                    width: 200,

                    rootVisible: false,
                    lines: false,
                    singleExpand: true,
                    useArrows: true,

                    loader: new Ext.tree.TreeLoader({
                        dataUrl: App.siteURL+'/js/navigation.json',
                        createNode: function(attr){
                                var NodeEvent = attr.leaf ? "clickLeaf" : "clickBranch";
                                attr.listeners = {
                                    click : function( obj, evt, scope) {
                                        this.fireEvent(NodeEvent, this, attr, attr.text);
                                    }
                                };
                                return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
                            }
                    }),

                    root: new Ext.tree.AsyncTreeNode()
                },config));
                this.addEvents({'clickLeaf':true, 'clickBranch':true});
        	}
        })

Вся магия происходит в переопределенной функции createNode Ext.tree.TreeLoader класса.
Эта функция создает ветку, как можно было догадаться с названия, мы же проверяем атрибут нода, если это ветка то вызываем ивент clickLeaf, если узел – clickBranch.

В конце переопределнного конструктора Ext.tree.TreePanel добавляем наши новые события

this.addEvents({'clickLeaf':true, 'clickBranch':true});

Как это кушать?

Для подписки на событие использовать:

Ext.getCmp('navigation').on('clickLeaf',callbackFunction);

получаем компонент по его id, в нашем случае navigation, и показываем как реагировать на клик по ветке дерева.
(обратите внимание, что использовать надо не Ext.get, а именно Ext.getCmp)

Хочу также обратить внимание, что в ExtJS 3.0 предпочтительно переопределять constructor, а не initComponent функции компонента.

Немного теории по теме:

Полезные ссылки:
Ext event tutorial