1. #1
    Ext User xworker's Avatar
    Join Date
    Sep 2008
    Posts
    21
    Vote Rating
    0
    xworker is on a distinguished road

      0  

    Default Adding toolbar to extended treepanel

    Adding toolbar to extended treepanel


    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:
    Code:
    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.

    Code:
            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:
    Code:
    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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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:

    Code:
    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
    });

  3. #3
    Ext User xworker's Avatar
    Join Date
    Sep 2008
    Posts
    21
    Vote Rating
    0
    xworker is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    OK, if you want to stick with initComponent you should use:

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

  5. #5
    Ext User xworker's Avatar
    Join Date
    Sep 2008
    Posts
    21
    Vote Rating
    0
    xworker is on a distinguished road

      0  

    Default


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

Thread Participants: 1