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

[JetMah]

hack 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(ct, position) {
    this.originalonRender(ct, position);
    
    // 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 i = 0; i < rowtbar.length; i ++) {
            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 i = 0; i < rowbbar.length; i ++) {
            new Ext.Toolbar(rowbbar[i]).render(this.bbar);
        }
    }
} 

usage:

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:

[jay@moduscreate.com]

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

[Bobrovnik]

Thanks for sharing, I was just looking for such thing

[hworg]

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

[meroy]

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.

    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