Question

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

Answer 1

基本上你有两个选择：

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

有关布局here

我将采用第一个选项，因为它是来自Kitchen Sink demo的一个例子：

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'}
        ]
    }
]

演示：http://www.senchafiddle.com/#XFHkg#sZTqH

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

1 个答案: