PDA

View Full Version : 'Flex' in buttongroup



cahello
27 Jun 2012, 1:47 PM
Is there any option for the attribute 'flex' in case of buttongroup? There is a buttongroup, which is an item of panel (whose layout is border). The items of the buttongroup are 'label', 'cycle', 'button' and 'textfield'. Flex does not seem to work with buttongroup? Is there an alternative for that? :-/

scottmartin
27 Jun 2012, 7:11 PM
Using the example in the API, this seems to work:



Ext.create('Ext.panel.Panel', {
title: 'Panel with ButtonGroup',
width: 300,
height:200,
renderTo: document.body,
bodyPadding: 10,
html: 'HTML Panel Content',
tbar: [{
xtype: 'buttongroup',
columns: 3,
title: 'Clipboard',
flex: 1,
items: [{
text: 'Paste',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
cls: 'btn-as-arrow'
},{
xtype:'splitbutton',
text: 'Menu Button',
scale: 'large',
rowspan: 3,
iconCls: 'add',
iconAlign: 'top',
arrowAlign:'bottom',
menu: [{ text: 'Menu Item 1' }]
},{
xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
},{
text: 'Copy', iconCls: 'add16'
},{
text: 'Format', iconCls: 'add16'
}]
}]
});


Scott.

cahello
2 Jul 2012, 12:40 PM
I have the following code. I want the the 4 different buttons in the buttongroup to expand and contract when the window expands and contracts respectively. However, this does not happen. The example given in the sencha docs is not what I am looking forward to.

Is there any way I can achieve this? Is there an alternative to 'flex' that will allow the 4 columns in the buttongroup to expand and contract as required?



var mainpanel = new Ext.panel.Panel({
autoshow : true,
id: 'mainpanel',
title: 'mainpanel',
renderTo : 'viewthis',
layout : 'border',
align : 'stretch',
height: 400,
items : [ {
xtype : 'buttongroup',
title: 'Welcome',
id : 'btngrp',
columns: 5,
region : 'center',
height: 25,
align: 'stretch',
items : [ {
xtype: 'label',
flex: 1,
text: 'Menu:',
},
{
xtype: 'cycle',
cls:'w-icon',
flex: 3,
showText: true,
menu: {
id: 'view-type-menu',
items: [{
text: 'text only',
},{
text: 'HTML',
}]
}
},{
xtype:'button',
cls:'n-icon',
flex: 2,
text: 'New ',
},{
xtype:'textfield',
cls: 's-icon',
flex: 3,
emptyText: 'Search',
}
],
}]
});


PS: The 3 classes belong to a css style rule, which define the left and right margins along with the border.