Tile Layout on a list

[ryancanulla]

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

[rdougan]

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.).

[ryancanulla]

thanks!

[rdougan]

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

http://rdougan.github.com/barebones-tiled-dataview/

[karen606]

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