aligment of keypad buttons(numbers) - sencha-touch-2

Question

I'm new to sencha touch.I wrote code for number keypad,but the buttons are displayed vertically.my code is
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
I tried ,but i didnt get this .I think it's easy but i don't know how to do this.can anyone help me.thanks in advance

Answer 1

Just add layout:vbox to your config:
Ext.define("exercise.view.Numberplate",{
extend: "Ext.SegmentedButton",
requires:['Ext.Button'],
xtype:'Numberplate',
allowMultiple: true,
config: {
layout: 'vbox', // Add right here
pack:'center',
centered:true,
height:30,
width:100,
xtype:'button',
items: [
{
xtype:'segmentedbutton',
allowDepress:true,
scroll:true,
//layout:'vbox',
items:[
{
text:'1',
width:100
},
{
text : '2',
width:100
},
{
text: '3',
width:100
}
]
},
{
xtype:'segmentedbutton',
//centered:true,
pack:'center',
items:[
/* {
centered:true,
html: [
'<br><br><br><br>'
].join("")
},*/
{
text:'4',
width:100
},
{
text:'5',
width:100
},
{
text:'6',
width:100
}
]
}
]
},
constructor: function() {
this.on({
scope: this,
delegate: 'button',
tap: 'tapHandler'
});
this.callParent(arguments);
},
tapHandler: function(button) {
alert(button.getText());
// this.setHtml("<span class=action>User tapped " + button.getText() + "</span>");
}
});
Hope it helps :)