PDA

View Full Version : Ext toolbar help



teja_0080
31 Dec 2010, 1:44 AM
Hi,
can any please help me in attaining the following layout as shown in the attachment

steffenk
31 Dec 2010, 3:30 AM
put a vbox layout with 2 elements in one toolbar item. First is the image, second with 4 buttons.
Maybe you even don't need vbox, just nest elements.

teja_0080
31 Dec 2010, 3:42 AM
thanks for the quick reply,
i used table layout with 2 columns, first cell with a rowspan of 2 and second cell with two rows internally one having the second image and other the toolbar.

now the prob is my second image shoud have a style attribute "background-repeat : repeat-x" is this possible ?
can you please guide me.

steffenk
31 Dec 2010, 3:50 AM
you don't need, but sure, the bottom needs a hbox layout

tbar:
{
items: {
html: '<img src=... />'
}, {
layout: 'hbox',
items: {
'xtype': 'button',
text: 'button1'
},{
'xtype': 'button',
text: 'button2'
},{
'xtype': 'button',
text: 'button3'
},{
'xtype': 'button',
text: 'button4'
}
}
},
...

fill that pseudo code with your items. Use the API for finding further properties.

teja_0080
31 Dec 2010, 4:06 AM
thanks that helped a lot, the below is my code.

var frame = new Ext.Panel({
renderTo: Ext.getBody(),
//layout: 'column',
layoutConfig: {columns:3},
layout:'table',
autoHeight: true,
autoWidth: true,
items:[{
html: '<img src="image1.gif"/>',
rowspan: 2
//cellCls:'image'
},{
html: '<img src="image2.gif"/>',
colspan: 2
},{
layout: 'hbox',
buttonAlign: 'left',
items : [{
xtype: 'button',
text:'<b>Admin</bd>', handler: onItemClick
},
{
xtype:'button',
text:'<b>Reports</bd>', handler: onItemClick
},
{
xtype:'button',
text:'<b>Close</b>',handler: onItemClick
}]
}]
});


my requirement is image-1 shud fill 10% of the page, where as image-2 shud fill 90% of the page. (with in the same row)
in HTML we can do this by having "background-repeat: repeat-x" don't we have the same in extJs ?

steffenk
31 Dec 2010, 4:14 AM
that's no HTML, it's CSS. use an empty container (maybe with html: '&nbsp;') and set the css class by cls. Define your styles in css file.
btw - please use code tags when posting code, it's unreadable if plain.

teja_0080
31 Dec 2010, 10:14 AM
thanks a ton.
i used 3 columns and place a new image in the third column and could achieve the requirement.

Can i change the background color of the HBox, i tried many examples but in vain.