Adding toolbar to extended treepanel

[xworker]

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]

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]

I followed your tutorial on extending : 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]

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]

Ok. Works. Thanks. Will consider redesigning to your suggested design if I have the time.