How do I achieve a wrap/flow layout from left to right in Sencha Touch

0
votes

None of the layouts I've seen in Sencha Touch seem to handle the flow type layout. For example I'd like to dipsplay within a dataview, images 2 columns wide and flow left to right like so:

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

How would I achieve the above using Sencha's layout system?

3
sencha-touchsencha-touch-2
With a basic dataview and some css making the items 50% wide and float: left. – Titouan de Bailleul

3 Answers

0
votes

You can work with "vbox" and "hbox" combo: http://docs.sencha.com/touch/2.2.0/#!/guide/layouts

Here a code sample:

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

});

0
votes

You can get some ideas from touchstyle example which comes with sencha touch library or have a look at this http://www.touchstyle.mobi/app/ The list is rendered as 2 row layout using tpl, you can use similar approach.

0
votes

I would do something like this for your dataViewItem template:

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