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
    86
    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
    86
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi