Question

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

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

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

Answer 1

您可以使用“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'
                }
            ]
        },
    ]
}

}）;

Answer 2

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

Answer 3

我会为您的dataViewItem模板执行类似的操作：

itemTpl: Ext.create('Ext.XTemplate', 
     '<div><img src="{image_url}" width="{[this.getWidth()]}" /></div>',
     {
          getWidth: function() {
               var width = window.innerWidth / 2;
               return width;
          }
      }
),

如何在Sencha Touch中从左到右实现换行/流布局

3 个答案: