Di Sole

ExtJS Tree и Ext.utils.Observable

Posted in ExtJS, JavaScript by ignar on 29.08.2009

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


Спешу сообщить, что мой адрес поменялся.
Если эта статья Вам интересна — тут она обновлена.

Живой блог лучше чем мертвый.

Новая rss волна — ignar’s log

Мой твиттер остался неизменным — ignart

Мои контакты


Статьи про ExtJS на DaddyFeed.com

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

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

Реклама
Tagged with: ,

комментария 2

Subscribe to comments with RSS.

  1. […] ExtJS Tree и Ext.utils.Observable ▶ Comment /* 0) { jQuery('#comments').show('', change_location()); jQuery('#showcomments a .closed').css('display', 'none'); jQuery('#showcomments a .open').css('display', 'inline'); return true; } else { jQuery('#comments').hide(''); jQuery('#showcomments a .closed').css('display', 'inline'); jQuery('#showcomments a .open').css('display', 'none'); return false; } } jQuery('#showcomments a').click(function(){ if(jQuery('#comments').css('display') == 'none') { self.location.href = '#comments'; check_location(); } else { check_location('hide'); } }); function change_location() { self.location.href = '#comments'; } }); /* ]]> */ Нажмите, чтобы отменить ответ. […]

  2. […] ExtJS Tree и Ext.utils.Observable ▶ 7 коммент. /* 0) { jQuery('#comments').show('', change_location()); jQuery('#showcomments a .closed').css('display', 'none'); jQuery('#showcomments a .open').css('display', 'inline'); return true; } else { jQuery('#comments').hide(''); jQuery('#showcomments a .closed').css('display', 'inline'); jQuery('#showcomments a .open').css('display', 'none'); return false; } } jQuery('#showcomments a').click(function(){ if(jQuery('#comments').css('display') == 'none') { self.location.href = '#comments'; check_location(); } else { check_location('hide'); } }); function change_location() { self.location.href = '#comments'; } }); /* ]]> */ […]


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: