0

我在 Sencha Touch 中看到的所有布局似乎都无法处理流式布局。例如，我想在数据视图中显示，图像 2 列宽，从左到右流动，如下所示：

[ 1 ] [ 2 ]
[ 3 ] [ 4 ]
[ 5 ] [ 6 ]

我将如何使用 Sencha 的布局系统实现上述目标？

4

3 回答 3

0

您可以使用“vbox”和“hbox”组合：http ://docs.sencha.com/touch/2.2.0/#!/guide/layouts

这是一个代码示例：

Ext.define('MyApp.view.central.Menu',{
extend: 'Ext.Container',
requires: ['Ext.Container'],

xtype: 'centralMenu',

config: {
    layout: {
        type: 'vbox',
        pack: 'center'
    },

    defaults: {flex:1},

    items: [
        {
            layout: {
                type: 'hbox',
                pack: 'center'
            },
            items: [
                {
                    xtype:'button',
                    width: '50%',
                    cls:'menu-button menu-button-1',
                    pressedCls: 'menu-button-1-pressing',
                    id: 'menu-button-1'
                },
                {
                    xtype: 'button',
                    width: '50%',
                    cls:'menu-button menu-button-2',
                    pressedCls: 'menu-button-2-pressing',
                    id: 'menu-button-2'
                }
            ]
        },
        {
            layout: {
                type: 'hbox',
                pack: 'center'
            },
            items: [
                {
                    xtype: 'button',
                    width: '50%',
                    cls:'menu-button menu-button-3',
                    pressedCls: 'menu-button-3-pressing',
                    id: 'menu-button-3'
                },
                {
                    xtype: 'button',
                    width: '50%',
                    cls:'menu-button menu-button-4',
                    pressedCls: 'menu-button-4-pressing',
                    id: 'menu-button-4'
                }
            ]
        },
        {
            layout: {
                type: 'hbox',
                pack: 'center'
            },
            items: [
                {
                    xtype:'button',
                    width: '50%',
                    cls:'menu-button menu-button-5',
                    pressedCls: 'menu-button-5-pressing',
                    id: 'menu-button-5'
                },
                {
                    xtype: 'button',
                    width: '50%',
                    cls:'menu-button menu-button-6',
                    pressedCls: 'menu-button-6-pressing',
                    id: 'menu-button-6'
                }
            ]
        },
    ]
}

});

于 2013-04-29T20:04:20.263 回答
0

您可以从 sencha touch 库附带的 touchstyle 示例中获得一些想法，或者查看此http://www.touchstyle.mobi/app/ 该列表使用 tpl 呈现为 2 行布局，您可以使用类似的方法。

于 2013-04-30T05:58:54.637 回答
0

我会为您的 dataViewItem 模板做这样的事情：

itemTpl: Ext.create('Ext.XTemplate', 
     '<div><img src="{image_url}" width="{[this.getWidth()]}" /></div>',
     {
          getWidth: function() {
               var width = window.innerWidth / 2;
               return width;
          }
      }
),
于 2013-05-01T17:49:11.393 回答