[SOLVED] buttongroup, manage column ?

[Christiand]

Is there a way to manage which column a button in a button group will appear ? Like a colspan or colindex propreties ?

Consider the following code:


xtype: 'buttongroup',
columns: 4,
items: [
// Column 1
{
xtype:'button',
text: 'open,
scale: 'large',
rowspan: 3,
iconCls: 'icon-open-32',
iconAlign: 'top',
textAlign: 'bottom',
},

// Column 2
{
xtype:'button',
text: 'New',
iconCls: 'icon-new-16',
},{
xtype:'button',
text: 'Close',
iconCls: 'icon-close-16',
},{
xtype:'button',
text: 'Refresh',
iconCls: 'icon-refresh-16',
},

// Column 3
{
xtype:'button',
text: 'Save',
scale: 'large',
rowspan: 3,
iconCls: 'icon-save-32',
iconAlign: 'top',
textAlign: 'bottom',
},

//Column 4
{
xtype:'button',
text: 'Save As',
scale: 'large',
rowspan: 3,
iconCls: 'icon-saveas-32',
iconAlign: 'top',
textAlign: 'bottom',
}
]


I want to have a 4 column setup, column1 with one large button, column 2 with 3 small button, and column 3&4 with a large button ?

The code above produce: column 1 one large button, col2 & col3 one small one large, and col4 one large? :-?

[Christiand]

wooha. found my solution in the doc :)

The buttongroup columns config options tell you to look into Ext.layout.TableLayout.columns. Which in turn explain that items are added like in a html <table> from left to right, top to bottom! :D



you want to include along with any span attributes specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the total column count in the layoutConfig and start adding panels in their natural order from left to right, top to bottom.


couldn't be more obvious then this!