Results 1 to 5 of 5

Thread: Tile Layout on a list

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    17
    Vote Rating
    2
      0  

    Default 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,159
    Vote Rating
    7
      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
    2
      0  

    Default

    thanks!

  4. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Vote Rating
    7
      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
      0  

    Default 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~~~

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •