CODEWITHSUNDEEP
extjs
user99322
user99322

Reputation: 1207

ExtJS Toolbar with multiple rows

Is it possible to have an ExtJsToolBar with multiple lines? I want a few controls on the first line and 3 ExtJsButtons on the 2nd. The toolbar is the top toolbar of a Panel.

Upvotes: 14

Views: 37802

Answers (6)

AGupta
AGupta

Reputation: 5734

What about dockedItems its much simpler too. 

var toolbar1 = {
   xtype : 'toolbar',
   dock : 'top', // bottom, right, left
   items: [...]
};

var toolbar2 = {  
   xtype : 'toolbar',
   dock : 'top',
   items: [...]
};

Ext.create('Ext.panel.Panel', {
    dockedItems: [toolbar1,toolbar2]
});

I know its quite old and already answered, may be it can help someone :)

Upvotes: 2

Josh Justice
Josh Justice

Reputation: 21404

Not sure about earlier versions, but as of ExtJS 4.0 you can do it like this when you're defining the grid:

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {text:'Toolbar 1 Button 1'},
            {text:'Toolbar 1 Button 2'}
        ]
    },
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {text:'Toolbar 2 Button 1'}
        ]
    }
],

http://dev.sencha.com/deploy/ext-4.0.2a/docs/#/api/Ext.panel.Panel

Upvotes: 19

Paul Moore
Paul Moore

Reputation: 1

Look at this thread in the Ext forum. It describes how to create a toolbar and render it to an existing toolbar.

http://www.extjs.com/forum/showthread.php?t=12433

Upvotes: 0

tikotzky
tikotzky

Reputation: 2592

I'm not sure if this is exactly what you are looking for but Toolbars has been revamped in Ext 3.0.

You might want to take a peek at: http://extjs.com/deploy/ext-3.0-rc1.1/examples/toolbar/toolbars.html

Upvotes: 1

Thevs
Thevs

Reputation: 3251

You haven't mentioned to what widget you like to add toolbars, but in general you may add as many toolbars as you want:

var panel = new Ext.Panel();
var tool1 = new Ext.Toolbar({...});
var tool2 = new Ext.Toolbar({...});

panel.add(tool1);
panel.add(tool2);
...

If you like to add extra toolbar to the top of grid, then do find grid's panel component and add toolbars to it. It could look like this (not tested):

tPanel = grid.getTopToolbar().ownerCt; // get top toolbar's container panel
tPanel.add(anotherToolbar);

Upvotes: 17

Igor Pavelek
Igor Pavelek

Reputation: 1444

I'm not sure, whether it's possible or not, but what you can always do is to divide north area (if using border layout for example) into two rows using row layout. Then you can add one toolbar to the top row and the other one to the second row.

Upvotes: 0

Related Questions