View Full Version : Two columns and DataView?

19 Nov 2010, 10:39 AM
I am returning a list of products and want to display them in a dataview so that the products are arranged in two columns. How can I arrange my itemTpl to make this happen? My current test template that just shows one column is as follows:

tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div id="productItem">',
'<img src="{ProductImageUrl}" />',
'<div style="font-size: 8pt">{Title}</div>',

Is this doable? Is the DataView the right way to go here? Basically I want this to work like the Mobi Styles demo app, but unfortunately source is not included in examples :(

Thanks a ton for any help!

Steffen Hiller
19 Nov 2010, 4:01 PM
Change id="productItem" to class="productItem".
Then define in your css:

.productItem {
float: left;
width: 200px;

Tweak the width of your productItem so that two items fill out your panel's width.