PDA

View Full Version : DataView variable row items



hermann.s
5 Sep 2014, 4:30 AM
Is it possible to have a dataview with a variable number of images per row?

For example, depending on browser size, I would like to be able to display as many images as possible per row, and upon browser resize to recalculate the max number of images per row.

Currently I only have 1 item per row with this DataView and I am not sure how to change it :

Parent Panel

{ xtype: 'panel', title: 'Event Management System', layout: 'fit', height: 500, width: 640, items: [{ xtype: 'application.IconView' }] }

DataView

Ext.define('EMS.view.application.IconView', {
extend: 'Ext.view.View',
alias: 'widget.application.IconView',

xtype: 'iconView',
itemId: 'iconView',

tpl: ['<tpl for=".">',
'<div class="dataview">',
'<div style="position:relative;width:100px;height:100px;margin:15px;" class="thumb-wrap">',
'<img src="{src}" />',
'{text}',
'</div>',
'</div>',
'</tpl>'],
itemSelector: 'div.dataview',
store: 'application.Icon',


initComponent: function () {
this.callParent(arguments);
}
});

slemmon
8 Sep 2014, 9:19 PM
Hi,

In your CSS for the dataview item you'll use float: left.
Example:

a35