Sencha touch 2 在sencha touch 2中创建类似Android的网格视图

我正在尝试在SenchaTouch2中创建类似Android的网格视图。网格视图应该有9个按钮，有3行3列。我对sencha很陌生，我一直在谷歌上搜索，但无法找到解决方案。请指导我这样做。

基本上你有两个选择：

布局为

vbox

的容器，其中包含布局为

hbox

的三个子项

布局为

hbox

的容器，其中包含三个子项布局为

vbox

的容器

更多关于布局的信息

我将选择第一个选项，因为这是厨房水槽中的一个示例：

演示：

layout: {
    type : 'vbox',
    pack : 'center',
    align: 'stretch'
},

defaults: {
    xtype: 'container',
    flex : 1,
    layout: {
        type : 'hbox',
        align: 'middle'
    },
    defaults: {
        xtype : 'button',
        margin: 15
    }
},

items: [
    {
        items: [
            {text: 'Normal'},
            {ui: 'round', text: 'Round'},
            {ui: 'small', text: 'Small'}
        ]
    },

    {
        items: [
            {ui: 'decline', text: 'Decline'},
            {ui: 'decline-round', text: 'Round'},
            {ui: 'decline-small', text: 'Small'}
        ]
    },
    {
        items: Ext.os.deviceType.toLowerCase() == "phone" ? [
            {ui: 'confirm', text: 'Confirm'},
            {ui: 'confirm-round', text: 'Round'},
            {ui: 'confirm-small', text: 'Small'}
        ] : [
            {ui: 'confirm', text: 'Confirm'},
            {ui: 'confirm-round', text: 'Round'},
            {ui: 'confirm-small', text: 'Small'}
        ]
    }
]