Sencha Touch: How to align buttons horizontally in an Ext.Panel? - sencha-touch

Question

I'm trying to get two buttons to show up next to each other in an Ext.Panel.
The .js code:
ProductView = new Ext.Panel({
styleHtmlContent: true,
scroll: 'vertical',
items: [
new Ext.DataView({
scroll: false,
store: productStore,
tpl: productTpl,
itemSelector: 'div.productView',
}),
{
xtype: 'button',
ui: 'blue-round',
height: '60',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
text: 'Share',
handler: function() {
// ...
}
}
]
});
The SCSS code:
#include sencha-button-ui('green', $branded-green);
#include sencha-button-ui('blue', $branded-blue);
This yeilds buttons that look like this:
I thought this may have been a sizing issue, but adding the width: '40%', attribute to each button only yields:
However, I'm wanting the buttons to sit next to each other instead of be stacked on top of each other. Any suggestions?
UPDATE:
I tried to take advantage of the align: property, but this did nothing:
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '40%',
align: 'left',
text: 'Buy',
handler: function() {
// ...
}
},{
xtype: 'button',
ui: 'green-round',
height: '60',
width: '40%',
align: 'right',
text: 'Share',
handler: function() {
// ...
}
}

Answer 1

You could wrap the buttons in a panel and set that panel's layout to hbox. That is basically what you did with the toolbar, but it won't have the toolbar styling if you don't want that. also, fyi with the hbox layout, you can specify 'flex' config options to components which determine how they are sized relative to each other

Answer 2

Okay, so the answer so far has been to wrap the whole thing in a toolbar. (I originally didn't do so, as these buttons are not to be docked. They are to show up under a scrolling DataView.) I had to squeeze the buttons in a bit as they were over extending past the edge of the toolbar and being cut off. I also had to change the height of the toolbar to accommodate the larger buttons and make its background transparent.
The button portion of the .js code now looks like:
{
xtype: 'toolbar',
height: '62',
items: [
{
xtype: 'button',
ui: 'blue-round',
height: '60',
width: '48%',
text: 'Buy',
handler: function() {
// ...
}
}, {xtype: 'spacer'}, {
xtype: 'button',
ui: 'green-round',
height: '60',
width: '48%',
text: 'Share',
handler: function() {
// ...
}
}
]
}

Answer 3

{ xtype : 'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'}, {
{xtype: "button",
text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },
You can use hbox layout to render the buttons horizontally using Sencha.
This is the sample code which works fine,
{ xtype :'panel',
layout: { type: 'hbox', },
items:[
{ xtype: "button", text: "Login", iconCls: 'action',
ui:"confirm", itemId:"sendButton", height: '60', width: '48%', //flex:3, },
{xtype: 'spacer'},
{xtype: "button", text: "Reset", iconCls: 'action', ui:"decline",
itemId:"resetButton", height: '60', width: '48%', //flex:3, }, ], },