PDA

View Full Version : Getting button height to span multiple rows



csky
4 Aug 2010, 6:30 AM
I have a button that I want to span several rows in a table. Is there a way to get the height to fill all the rows? height and autoHeight don't do anything.


new Ext.Panel(
{
layout: 'table'
,layoutConfig: { columns: 4 }
,items:
[
{ html: 'aa' }, { html: 'Col A', width: 190 }, { html: 'Col B', width: 190 }, {html: 'Col C', width: 190},
{ xtype:'button', text: 'button', autoHeight:true, height:"100%", rowspan:5, },
{ html: 'xx' }, { html: 'xx' }, { html: 'xx'},
{ html: 'xx' }, { html: 'xx' }, { html: 'xx'},
{ html: 'xx' }, { html: 'xx' }, { html: 'xx'},
{ html: 'xx' }, { html: 'xx' }, { html: 'xx'},
{ html: 'xx' }, { html: 'xx' }, { html: 'xx'},
]
,renderTo: Ext.getBody()
});

Condor
4 Aug 2010, 6:38 AM
'height' needs to be a number, so you already need to know how high the button needs to be.

ps. I advise against using a table layout. You wouldn't have this problem if you used a hbox layout with nested vbox layouts.

csky
4 Aug 2010, 6:55 AM
A quick prototype shows the hbox would work, although it seems I still need to give the hbox panel a specific number for the height. Each of my hbox columns is a panel of buttons. Am I trading one number for another or am I missing somethign.

Condor
4 Aug 2010, 7:06 AM
hbox and vbox layout can use layoutConfig:{align:'stretch'} and support the 'flex' config option for items.

csky
4 Aug 2010, 8:13 AM
I am missing something. I want the height of my top level panel to be as large as my tallest column. But, if I do not specify a height for my panel, I get nothing output:


btn = new Ext.Button({ text: 'Btn',width: "100%",height:"100%"});

new Ext.Panel({
layout:'hbox'
,height:400 // <== need this or nothing
// ,autoHeight: true
,width: 600
,renderTo: Ext.getBody()
,layoutConfig:{
align: 'stretch'
,pack: 'start'
}
,defaults:{
border: false
,defaultMargins: '2 0 2 4'
,layoutConfig: { defaultMargins: '2 0 2 4', align:'stretch'}
}
,items:[
{xtype:'panel', title:'<center>aa', items:[btn], layoutConfig: {defaultMargins: '2 0 0 0'}, layout:'vbox' },
{xtype:'panel', title:'<center>a', items:btn_a, layout:'vbox', width: 189 },
{xtype:'panel', title:'<center>b', items:btn_b, layout:'vbox', width: 190 },
{xtype:'panel', title:'<center>c', items:btn_c, layout:'vbox', width: 190 }
]
});

Condor
5 Aug 2010, 12:07 AM
1. Yes a panel with hbox or vbox layout needs both height and width. But why are you using a Panel instead of a Viewport?
2. Don't assign a height and width to the button! The layout will do that automatically when you add flex:1.