1. #1
    Ext User
    Join Date
    Oct 2007
    Posts
    4
    Vote Rating
    0
    kx is on a distinguished road

      0  

    Default [2.0b1][SOLVED] Panel config: assigning Toolbar config to the 'tbar' option

    [2.0b1][SOLVED] Panel config: assigning Toolbar config to the 'tbar' option


    I fairly searched the forum for my problem, but haven't found anything relevant. Sorry if that bug was described by someone else already.

    Ext.Panel manual states that config.tbar value can be "a Ext.Toolbar object, a toolbar config, or an array of buttons configs".

    As far as I understand that, it's supposed that one can assign a Ext.Toolbar config, so the toolbar instance itself will be created later when the panel renders. Sounds like a great idea.

    But I can't.

    PHP Code:
    Ext.onReady(function(){
      new 
    Ext.Panel({
        
    title'Toolbar Window',
        
    html'hello!',
        
    renderTodocument.body,
        
    tbar: {
          
    height40,
          
    items: [
            { 
    text'Button One' },
            { 
    text'Button Two' }
          ]
        } 
    // I believe that is a toolbar config
      
    });
    }); 
    This code causes the error: "this.topToolbar.render is not a function ext-all-debug.js (line 15637)".

    A short investigation revealed that at that location this.topToolbar is just a toolbar config that I've passed to the Panel, and for sure it has no render() method.

    It seems that the following code fixes that (at least it worked for me, but I haven't done extensive testing).

    PHP Code:
    // source/widgets/Panel.js (2.0 b1), line 560
    // WAS:
            
    if(this.tbar && this.topToolbar){
                if(
    this.topToolbar instanceof Array){
                    
    this.topToolbar = new Ext.Toolbar(this.topToolbar);
                }

                
    this.topToolbar.render(this.tbar);
            }

    // FIX:
            
    if(this.tbar && this.topToolbar){
                if(
    this.topToolbar instanceof Array || 
                  (
    typeof this.topToolbar == "object" && !this.topToolbar.getXType)) {
                
    // I'm newbie to Extjs; not sure that checking getXType 
                // is an acceptable way to determine whether the object is 
                // an Ext component or not
                    
    this.topToolbar = new Ext.Toolbar(this.topToolbar);
                }
                
    this.topToolbar.render(this.tbar);
            } 
    Same with the bottomToolbar at the lines that follow.

    Also I think some optimization is possible there. Elimination of the repeating code may save (just imagine! ) up to 160 bytes in the compressed ext-all.js, but seems a little bit cryptic at a first sight.

    PHP Code:
            // render top and bottom toolbars
            
    var tbShort = ['tbar''bbar'], tbLong = ['topToolbar''bottomToolbar'];
            for (var 
    i=0i<2i++) {
              var 
    tb tbLong[i];
              if (
    this[tbShort[i]] && this[tb]) {
                if (
    this[tb] instanceof Array || (typeof this[tb] == 'object' && !this[tb].getXType)) {
                  
    this[tb] = new Ext.Toolbar(this[tb]);
                }
                
    this[tb].render(this[tbShort[i]]);
              }
            } 

  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    it works perfectly if you pass it button configs:

    PHP Code:
        Ext.onReady(function(){
      new 
    Ext.Panel({
        
    title'Toolbar Window',
        
    html'hello!',
        
    renderTodocument.body,
        
    tbar: [
         
            { 
    text'Button One' },
            { 
    text'Button Two' }
         
        ] 
      });
    }); 

  3. #3
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

    Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

    Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!
    added to the doc bugs list under Ext.Panel.

    also fixed in SVN

    correct version
    Code:
        /**
         * @cfg {Object/Array} tbar
         * The top toolbar of the panel.  This can be either an {@link Ext.Toolbar} object or an array of
         * buttons/button configs to be added to the toolbar.  Note that this is not available as a property after render.
         * To access the top toolbar after render, use {@link #getTopToolbar}.
         */

  5. #5
    Sencha User jcwatson11's Avatar
    Join Date
    Jul 2007
    Posts
    75
    Vote Rating
    0
    jcwatson11 is on a distinguished road

      0  

    Default More Flexibility/Functionality

    More Flexibility/Functionality


    Hi All,

    This would be such a simple fix, and would add flexibility to the lib if Ext adopted a solution similary to what kx proposed. For example, here's the current code:

    Code:
            if(this.bbar && this.bottomToolbar){
                if(Ext.isArray(this.bottomToolbar)){
                    this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
                }
                this.bottomToolbar.render(this.bbar);
                this.bottomToolbar.ownerCt = this;
            }
    This simple fix would actually add flexibility and functionality by allowing the developer to actually provide a toolbar config object, and we wouldn't have to change the docs. Is there any reason why we wouldn't adopt something like this, especially since it's such a simple change that would add flexibility?

    Code:
            if(this.bbar && this.bottomToolbar){
                if(!this.bottomToolbar.render){
                    this.bottomToolbar = new Ext.Toolbar(this.bottomToolbar);
                }
                this.bottomToolbar.render(this.bbar);
                this.bottomToolbar.ownerCt = this;
            }
    Otherwise I'm going to have to override the enormous Panel.onRender function for a single line.

    The top toolbar could be fixed the same way (immediately above the code in question).

    Code:
            if(this.tbar && this.topToolbar){
                if(!this.topToolbar.render){
                    this.topToolbar = new Ext.Toolbar(this.topToolbar);
                }
                this.topToolbar.render(this.tbar);
                this.topToolbar.ownerCt = this;
            }
    Thanks for your help!
    -- JCW
    Ext is kewl.

  6. #6
    Ext User
    Join Date
    Oct 2008
    Posts
    5
    Vote Rating
    0
    jrussell.smyth is on a distinguished road

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    This is a doc error. It excepts either a Toolbar object or an array of toolbar items.

    Please add an entry in the doc error thread and we will get it cleaned up for the next release. Thanks!
    It seems to me that this type of gross documentation error should be updated immediately in the online documentation at the very least, and not need to wait for a new "release"

    It is understandable that your local copy will be frozen at the release you download, but the online docs should be able to take care of this type of error as they are found, with a disclaimer in docs "online documentation may be more current/accurate"

    Seeing as this documentation error just cost me >1 hour dev time trying to figure out why it didnt work...

  7. #7
    Ext User
    Join Date
    Jun 2007
    Posts
    34
    Vote Rating
    0
    cyberwizzard is on a distinguished road

      0  

    Default


    For some reason the 2.2 docs still have the wrong description... Tbh I agree with the opinion to simply 'fix' ExtJS to support the direct config option as almost every construction in ExtJS uses this approach.

    For now I'll work around it

  8. #8
    Sencha User stolsma's Avatar
    Join Date
    May 2008
    Location
    The Netherlands
    Posts
    20
    Vote Rating
    0
    stolsma is on a distinguished road

      0  

    Default


    Quote Originally Posted by cyberwizzard View Post
    For some reason the 2.2 docs still have the wrong description... Tbh I agree with the opinion to simply 'fix' ExtJS to support the direct config option as almost every construction in ExtJS uses this approach.

    For now I'll work around it
    Yep, today it took me again 2 hours before I remembered that the documentation was not correct and that I needed to use another solution (which I don't like at all visually...)
    Archhhhhhh......

    Sander