PDA

View Full Version : toolbar



lavap
24 Mar 2010, 1:41 AM
Hi,


I have create a border layout and inside that in the 'center' region I included a tabslayout with four tabs..and in the 'north' region toolbar with four buttons..using viewport.
Now I want to make connection between the buttons in the toolbar and tabs in the tabslayout...
by clicking the button in the toolbar the tab in the tabslayout must be activate..

plz help me in this ...

here is my code..






Ext.ns('test');

test.app = function(){


return{

init: function(){






var tb = new Ext.Toolbar({

width: 300,

height: 40,

items: [

{

xtype: 'button', // default for Toolbars, same as 'tbbutton'

text: 'Button1'

},

{

xtype: 'button', // default for Toolbars, same as 'tbbutton'

text: 'Button2'

},

{

xtype: 'button', // default for Toolbars, same as 'tbbutton'

text: 'Button3'

},

{

xtype: 'button', // default for Toolbars, same as 'tbbutton'

text: 'Button4'

},

]
});



var viewport = new Ext.Viewport({

layout: 'border',

items: [{


region: 'north',

xtype: 'toolbar',

items:[tb,


],
height:50,

split: 'true'

},{

region: 'west',

layout:'accordion',

width:300,

items:[{

title: 'pannel1',
autoLoad: 'sw.txt'

},{
title: 'pannel2',
autoLoad: 'dsa.txt'

},{

title:'pannel3',

autoLoad:'oops.txt'

}]

},{
region: 'center',

xtype: 'tabpanel',
activeTab: 0,

items: [grid1, {

title: 'tab1',
autoLoad :'sw.txt'

},{

title:'tab2',
autoLoad: 'oops.txt'
},{

title:'tab3',

autoLoad:'dsa.txt',

}]

},{

region: 'east',

xtype: 'panel',

html: 'east' ,

split:'true',

width:200


},{

region: 'south',

xtype: 'panel',

html: 'south' ,

split:'true',

height:100

}]});

return viewport
}

};

}();

Condor
24 Mar 2010, 2:36 AM
You are inserting a toolbar in a toolbar. Instead, use:

Ext.ns('test');
test.app = function () {
return {
init: function () {
var tabs = new Ext.TabPanel({
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
items: [grid1, {
title: 'tab1',
autoLoad: 'sw.txt'
},
{
title: 'tab2',
autoLoad: 'oops.txt'
},
{
title: 'tab3',
autoLoad: 'dsa.txt',
}]
});
var tb = new Ext.Toolbar({
region: 'north',
height: 50,
split: 'true',
items: [{
xtype: 'button',
text: 'Button1',
handler: function () {
tabs.setActiveTab(0);
}
},
{
xtype: 'button',
text: 'Button2',
handler: function () {
tabs.setActiveTab(1);
}
},
{
xtype: 'button',
text: 'Button3',
handler: function () {
tabs.setActiveTab(2);
}
},
{
xtype: 'button',
text: 'Button4',
handler: function () {
tabs.setActiveTab(3);
}
}]
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
tb, {
region: 'west',
layout: 'accordion',
width: 300,
items: [{
title: 'pannel1',
autoLoad: 'sw.txt'
},
{
title: 'pannel2',
autoLoad: 'dsa.txt'
},
{
title: 'pannel3',
autoLoad: 'oops.txt'
}]
},
tabs, {
region: 'east',
xtype: 'panel',
html: 'east',
split: 'true',
width: 200
},
{
region: 'south',
xtype: 'panel',
html: 'south',
split: 'true',
height: 100
}]
});
return viewport;
}
};
}();

lavap
24 Mar 2010, 2:50 AM
Hi,

can you plz send me the modified code....

lavap
24 Mar 2010, 3:34 AM
hey its working................thanks a lot:)