CODEWITHSUNDEEP
layoutextjstoolbar
Tony
Tony

Reputation: 31

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

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'
}]
});

Upvotes: 1

Views: 4839

Answers (1)

Justin
Justin

Reputation: 1310

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.

Upvotes: 1

Related Questions