How do i add a toolbar to my layout in extjs?

Question

I am trying to add a toolbar into my already created layout. I have the codes for both the toolbar and layout but i dont know how to integrate the the too

For my toolbar

<script>
Ext.onReady(function () {
new Ext.Toolbar({renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Menu Button',
menu: [{
text: 'Better'
}, {
text: 'Good'
}, {
text: 'Best'
}]
},'->', {
xtype: 'splitbutton',
text: 'Split Button',
menu: [{
text: 'Item One'
}, {
text: 'Item Two'
}, {
text: 'Item Three'
}]
},'', {
xtype: 'cycle',
showText: true,
minWidth: 100,
prependText: 'Quality: ',
items: [{
text: 'High',
checked: true
}, {
text: 'Medium'
}, {
text: 'Low'
}]
},]
});
});
</script>

and for my layout, I have

<script>
var viewport = new Ext.Viewport({
layout: "border",
defaults: {
bodyStyle: 'padding:10px;',
},
items: [{
region: "north",
html: 'North',
margins: '5 5 5 5'
}, {
region: 'west',
collapsible: true,
title: 'Some Info',
width: 200,
html: 'West',
margins: '0 0 0 5'
}, {
region: 'center',
title: 'Our Info',
html: 'Center',
margins: '0 0 0 0'
}, {
region: 'east',
collapsible: true,
width: 200,
title: 'Their Info',
html: 'East',
margins: '0 5 0 0'
}, {
region: 'south',
title: 'Their Info',
html: 'South',
width: 200,
margins: '5 5 5 5'
}]
});
</script>

How can i use the toolbar on this page? Thanks

@Justin, Here is my full code

var viewport = new Ext.Viewport({
layout: "border",
tbar: new Ext.Toolbar({
//Toolbar config options
items: [{
xtype: 'button',
height: 27,
text: 'Menu Button',
menu: [{
text: 'Better'
}, {
text: 'Good'
}, {
text: 'Best'
}]
}, '->',
{
xtype: 'splitbutton',
text: 'Split Button',
menu: [{
text: 'Item One'
}, {
text: 'Item Two'
}, {
text: 'Item Three'
}]
}, '',
{
xtype: 'cycle',
showText: true,
minWidth: 100,
prependText: 'Quality: ',
items: [{
text: 'High',
checked: true
}, {
text: 'Medium'
}, {
text: 'Low'
}]
}, ]
}),
defaults: {
bodyStyle: 'padding:10px;',
},
//layouf config
tems: [{
region: "north",
html: 'North',
margins: '5 5 5 5'
}, {
region: 'west',
collapsible: true,
title: 'Some Info',
width: 200,
html: 'West',
margins: '0 0 0 5'
}, {
region: 'center',
title: 'Our Info',
html: 'Center',
margins: '0 0 0 0'
}, {
region: 'east',
collapsible: true,
width: 200,
title: 'Their Info',
html: 'East',
margins: '0 5 0 0'
}, {
region: 'south',
title: 'Their Info',
html: 'South',
width: 200,
margins: '5 5 5 5'
}]
});

Justin · Answer 1 · 2012-02-08T14:53:24.663

1

You should be able to add your toolbar as a config option to the bbar or tbar of your main panel.

var viewport = new Ext.Viewport({
  layout: "fit",           
  items: [
    //We add one "main" panel that fills up entire Viewport
    {
      layout: "border",
      defaults: {
        bodyStyle: 'padding:10px;',
      },
      tbar: new Ext.Toolbar({ 
        //your Toolbar config options
      }), 
      items: [
        //your panels here
      ]
    }
  ]
  ...

In this scenario, you would want to get rid of the "renderTo" config in your toolbar.

edited Feb 08 '12 at 14:53

answered Feb 06 '12 at 15:31

Justin

1,310
3
18
29

Hey Justin, Thanks for you answer. i am still kinda stuck! I am new to extjs so i pretty much still dont know how what to do. I edit my code using your response but still not making progress. take a look at my full code and tekll me if there is something missing. thanks – Tony Feb 06 '12 at 23:22
Tony - Copy your entire code so I can see. The first thing I see is when you deleted the renderTo config option you also deleted the opening "{". Remember, you are creating a new toolbar which accepts an object of config options so you need new Ext.Toolbar({ //your config options }). – Justin Feb 07 '12 at 13:29
,Thanks for your reply. Now,this code shows my layout but still fails to show my toolbar. – Tony Feb 08 '12 at 04:50
Ahhhh, not sure you can add a tbar to a Viewport. Just did a double take in the documentation... you will have to add your tbar config to a panel. I also see where you start your layout config instead of items: you have tems: but this might just be a copy paste error since I am not sure how your layout would even render. You can basically accomplish the same thing as we are trying here if you change your Viewport layout to 'fit' and add a panel that includes your current Viewport items. – Justin Feb 08 '12 at 14:44
Justin, Thanks again. it worked! I didnt have to put in any new codes. the layout:fit, command made it work. thanks again. I will put my full code up later so that you can see it.my nexttask now is making the menu items fire events on click. – Tony Feb 08 '12 at 17:18
Good to hear! If you are having trouble listening for events that will be for another question but don't hesitate to ask if you can't find your answer, helps everyone. A quick hint, you can add a "handler: someFunc(){}" config to your buttons. This works great when just getting started, of course for a full blown application I recommend checking out the documentation on how to architect your application with the MVC approach. Check out: http://www.sencha.com/learn/extjs/?4x Also, check out the documentation here for buttons: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button – Justin Feb 08 '12 at 17:35
justin, is there an easier tutorial that addresses listening for clicks / events? – Tony Mar 12 '12 at 05:00
Start here (3 parts): http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/ Part 2 starts to show how you can hook up your controller to listen for view events. – Justin Mar 12 '12 at 15:37

How do i add a toolbar to my layout in extjs?

1 Answers1