CODEWITHSUNDEEP
extjs
user2325727
user2325727

Reputation: 17

EXTJS Toolbar and Buttons Placement help wanted

I am new to EXT JS and am trying to create a toolbar and add some buttons to it.

I have followed the EXTJS border layout technique and I have the form at the center of the viewport. Now I want to add the buttons to the upper corner of the viewport, in this case a north Region. I know how to generate the buttons and toolbars, but don't know how to render on the desired region.

Here is the sample code I have generated:

Ext.onReady(function () {
    new Ext.Toolbar({
        items: [{
            xtype: 'tbbutton',
            text: 'Button'
        }, {
            xtype: 'tbbutton',
            text: 'Menu Button',
            menu: [{
                text: 'Better'
            }, {
                text: 'Good'
            }, {
                text: 'Best'
            }]
        }, {
            xtype: 'tbsplit',
            text: 'Split Button',
            menu: [{
                text: 'Item One'
            }, {
                text: 'Item Two'
            }, {
                text: 'Item Three'
            }]
        }]
    });
});

I think I need help to use the renderTo keyword but I don't know how to use that.

Upvotes: 0

Views: 426

Answers (1)

Ezhil V
Ezhil V

Reputation: 882

In your viewport's items config add a panel which in-turn has the tbar config as:

items: [
    new Ext.Panel({
        region: 'north',
        tbar: ['->', YOUR_TOOL_BAR]
    })
  ....
]

Upvotes: 1

Related Questions