1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    4
    Vote Rating
    0
    JetMah is on a distinguished road

      0  

    Post [share] ExtJS hack: Add multiple toolbars to a Panel

    [share] ExtJS hack: Add multiple toolbars to a Panel


    hack code:
    PHP Code:
    /**
     * ExtJS hack: Add multiple toolbars to a Panel
     * 
     * @author Jet Ma (jetmah(at)gmail(dot)com)
     */
    // rename the original onRender method to avoid call itself
    Ext.Panel.prototype.originalonRender Ext.Panel.prototype.onRender;

    // override onRender method
    Ext.Panel.prototype.onRender = function(ctposition) {
        
    this.originalonRender(ctposition);
        
        
    // use the custom rowtbar argument to add it to this TopToolbar
        
    if(this.tbar && this.rowtbar){
            var 
    rowtbar this.rowtbar;
            if(!
    Ext.isArray(rowtbar))
                return;
            
            for(var 
    0rowtbar.length++) {
                new 
    Ext.Toolbar(rowtbar[i]).render(this.tbar);
            }
        }
        
        
    // use the custom rowbbar argument to add it to this BottomToolbar
        
    if(this.bbar && this.rowbbar) {
            var 
    rowbbar this.rowbbar;
            if(!
    Ext.isArray(rowbbar))
                return;
                
            for(var 
    0rowbbar.length++) {
                new 
    Ext.Toolbar(rowbbar[i]).render(this.bbar);
            }
        }

    usage:
    PHP Code:
    var panel = new Ext.Panel({
        
    //...
        
    tbar: [{text'button one'}, {text'button two'}],
        
    rowtbar: [
            [{
    text'row1 buttone 1'}, {text'row1 button2'}],
            [{
    text'row2 buttone 1'}, {text'row2 button2'}]
        ],
        
    bbar:  [{text'button one'}, {text'button two'}],
        
    rowbbar: [
            [{
    text'row1 buttone 1'}, {text'row1 button2'}],
            [{
    text'row2 buttone 1'}, {text'row2 button2'}]
        ]
    }); 
    screenshot:
    Attached Images
    Last edited by mystix; 20 Mar 2010 at 9:32 AM. Reason: moved to Examples forum from Open Discussion

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    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


    ..........or, you can setup one MASTER Toolbar with a specific height and use the anchor or vbox layouts. Then set the master toolbar's children as other toolbars.

  3. #3
    Ext JS Premium Member Bobrovnik's Avatar
    Join Date
    Jul 2009
    Posts
    74
    Vote Rating
    0
    Bobrovnik is on a distinguished road

      0  

    Default


    Thanks for sharing, I was just looking for such thing
    Stanislav Golovenko.

    My extentions:
    Slider Button
    Desktop Icon Manager

  4. #4
    Ext User
    Join Date
    May 2009
    Posts
    14
    Vote Rating
    0
    hworg is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    ..........or, you can setup one MASTER Toolbar with a specific height and use the anchor or vbox layouts. Then set the master toolbar's children as other toolbars.
    could you please provided a small sample code that would show your approach? I tried but I'm just getting a blank toolbar rather than 2 toolbars.

    thanks

  5. #5
    Sencha User
    Join Date
    Jun 2009
    Posts
    750
    Vote Rating
    0
    meroy is on a distinguished road

      0  

    Default


    As Jay has mentioned above, both the anchor or vbox layout can be used to achieve a multi-row toolbar.

    Here's an example utilizing the anchor layout for the tbar and the vbox layout for the fbar.

    Both work equally well.

    Code:
        new Ext.Panel({
            title    : 'Panel with many toolbars',
            renderTo : document.body,
            border   : true,
            width    : 600,
            height   : 400,
            html     : '... content ...',
    
            tbar : {                        // configured using the anchor layout
                xtype    : 'container',
                layout   : 'anchor',
                height   : 27 * 3,
                defaults : { height : 27, anchor : '100%' },
    
                items    : [
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'tbar 1'
                        },'-',{
                            'text' : 'button 1'
                        }]
                    }),
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'tbar 2'
                        },'-',{
                            'text' : 'button 2'
                        }]
                    }),
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'tbar 3'
                        },'-',{
                            'text' : 'button 3'
                        }]
                    })
                ]
            },
    
            bbar : {                        // configured using the vbox layout
                xtype    : 'container',
                layout   : {
                    type  : 'vbox',
                    pack  : 'start',
                    align : 'stretch'
                },
                height   : 27 * 3,
                defaults : { flex : 1 },
    
                items    : [
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'bbar 1'
                        },'-',{
                            'text' : 'button 1'
                        }]
                    }),
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'bbar 2'
                        },'-',{
                            'text' : 'button 2'
                        }]
                    }),
                    new Ext.Toolbar({
                        items : [{
                            'text' : 'bbar 3'
                        },'-',{
                            'text' : 'button 3'
                        }]
                    })
                ]
            }
    
        });
    Cheers,
    Mario
    Last edited by meroy; 28 Mar 2010 at 7:58 PM. Reason: Provide both anchor and vbox layout how-to

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    0
    Sarika is on a distinguished road

      0  

    Default thread is very usefull

    thread is very usefull


    this really helped me. thanx a lot