PDA

View Full Version : Adding toolbar to extended treepanel



xworker
24 Sep 2008, 1:06 AM
Hi

I want to add a toolbar to my treecomponent. My component extends another of my component which extends treepanel. This is because we want to show different stuff for different types of users.

This is the extended class:


FAQCategoryTreePanelAdmin = Ext.extend(FAQCategoryTreePanel , {

title: 'admin tree',

/../



How do I add the toolbar to the FAQCategoryTreePanelAdmin ? Tried to add it below 'title'
and tried sending it as parameter to the baseclass like this.



FAQCategoryTreePanel.superclass.initComponent.call(this, {tbar:{

id : 'tab',
text : textKeys.FAQ_MAIN_TAB_NEWTAB_BUTTON,
iconCls : 'new-tab',
disabled : true,
handler : this.openTab,
scope : this

}});



But that didnt work either.

The baseclass:



FAQCategoryTreePanel = Ext.extend(Ext.tree.TreePanel, {

id : 'tree',
region : 'west',
title : textKeys.FAQ_CATAGORYTREE_HEADER,
split : true,
width : 225,
minSize : 175,
maxSize : 400,
collapsible : false,
margins : '0 0 5 5',
cmargins : '0 5 5 5',
border : true,

root : new Ext.tree.AsyncTreeNode({
text : 'Category Tree',
draggable : false,
id : '0'
}),

rootVisible : false,
lines : false,
useArrows : true,
autoScroll : true,


/.../



Thanks

Condor
24 Sep 2008, 1:14 AM
I wished people would stop extending classes by putting the config in the prototype or by using initComponent (both can have unwanted side-effects, as you already noticed with tbar).
IMHO the proper way to extend an Ext.Component (or descendant) is:


NewClass = function(config) {
NewClass.superclass.constructor.call(this, Ext.apply({
// add standard config here (except listeners)
}, config));
this.on({
// add standard listeners here
});
}
Ext.extend(NewClass, BaseClass, {
// add new methods and/or override methods here
});

xworker
24 Sep 2008, 1:31 AM
I followed your tutorial on extending : http://extjs.com/learn/Manual:Component:Extending_Ext_Components (http://extjs.com/learn/Manual:Component:Extending_Ext_Components) when designing. Actually had the structure you suggested before but refactored it to follow what I believed was the best practice. So what should I do? Is it not possible to add the toolbar with the design I now have? This current design feels more intuitive to me, it's easier to see directly what compoent which is extended.

thanks

Condor
24 Sep 2008, 1:37 AM
OK, if you want to stick with initComponent you should use:


FAQCategoryTreePanelAdmin = Ext.extend(FAQCategoryTreePanel, {
title: 'admin tree',
initComponent: function() {
Ext.apply(this, {
tbar: [...]
});
FAQCategoryTreePanelAdmin.superclass.initComponent.call(this);
}
...
});

xworker
24 Sep 2008, 5:23 AM
Ok. Works. Thanks. Will consider redesigning to your suggested design if I have the time.