PDA

View Full Version : Has anyone tried using hbox or vbox?



artalat
17 Jun 2010, 11:53 AM
Well I was try out this new framework, by porting one of my Ext JS apps to Sencha Touch. Naturally I assumed that common classes with work the same way. The follow code when run by Ext JS creates a panel that has nine buttons of equal widths and equal heights. But doesnt work the same way on my iphone with Sencha Touch. So these layout work differently then? or am i missing something?



cmp = Ext.extend(Ext.Panel, {
title: 'title',
layout: 'vbox',
height: 250,
initComponent: function() {
this.layoutConfig = {
align: 'stretch'
};
this.items = [
{
xtype: 'container',
autoEl: 'div',
flex: 1,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
}
]
},
{
xtype: 'container',
autoEl: 'div',
flex: 1,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
}
]
},
{
xtype: 'container',
autoEl: 'div',
flex: 1,
layout: 'hbox',
layoutConfig: {
align: 'stretch'
},
items: [
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
},
{
xtype: 'button',
text: 'MyButton',
flex: 1
}
]
}
];
cmp.superclass.initComponent.call(this);
}
});