1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    1
    ryancanulla is on a distinguished road

      0  

    Default Tile Layout on a list

    Tile Layout on a list


    Is it possible to have a tiled layout on a list?

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You need to manually do this.

    What you would do is use Ext.DataView and then give it a custom cls and itemTpl. Then you can target each item and tile the items (float, inline-block, etc.).
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    1
    ryancanulla is on a distinguished road

      0  

    Default


    thanks!

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      1  

    Default


    I just created a super simple barebones example over on github:

    http://rdougan.github.com/barebones-tiled-dataview/
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    4
    Vote Rating
    0
    karen606 is on a distinguished road

      0  

    Default Please modify css you will get a tile layout for list!

    Please modify css you will get a tile layout for list!


    I have a list created as below:
    var classList = Ext.create('Ext.dataview.List', {
    id: 'clsList',
    store : 'myStore',
    layout: 'vbox',
    xtype : 'classesList',
    inline: { wrap: false },
    style : 'padding-top: 50px; width: 500px; height: 500px; border-radius: 10px;
    background-color:rgba(0,0,0,0); ',
    itemTpl : '<div>{name}</div>'
    });

    The inline: { wrap: false } makes the list horizontal instead of vertical.


    then in your css style sheet add this:

    #clsList.x-list-nowrap .x-list-inner {
    width: 400px;
    }


    #clsList.x-list-nowrap .x-list-container {
    white-space: pre-wrap !important;
    page-break-after: always;
    }


    the page-break-after property inserts a page break after the element when the element overflows the width of the list. You can specify the "width" property of the list to control the column number of the list.

    Hope this helps~~~

Thread Participants: 2