如何在Sencha Touch中實現從左至右的包裝/流佈局

我在Sencha Touch中看到的任何佈局似乎都無法處理流式佈局。例如，我想一個數據視圖內dipsplay，圖像2列寬，從左到右的，像這樣：如何在Sencha Touch中實現從左至右的包裝/流佈局

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

我將如何實現上述使用Sencha的佈局系統？

來源

2013-04-29 jaffa

有了一個基本的數據視圖和一些CSS製作項目50％的寬浮動：左。 – 2013-04-29 12:44:58

你可以用「VBOX」和「橫向盒」組合工作：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-29 20:04:20 Scoup

你可以從sencha觸摸庫附帶的touchstyle例子中得到一些想法或者看看這個http://www.touchstyle.mobi/app/ 列表使用tpl呈現爲2行佈局，你可以使用類似的方法。

來源

2013-04-30 05:58:54 ThinkFloyd

我會做這樣的事情你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-01 17:49:11 Phil

如何在Sencha Touch中實現從左至右的包裝/流佈局

回答

相關問題