View Full Version : Horizontal Data inside Ext.view

3 Feb 2014, 4:36 AM
Hey guys,
I want to use Ext.view inside my sencha app which is mapped to a JSONP store. Now i have to display the resultant data horizontally. There are basically two things which i am getting from the returned JSON data:
Thumbnail and Title

I want to display the data according to the picture attached. Could you guys help me with this?

Thanks :)

4 Feb 2014, 5:04 AM
Its simple html. Put a div with a style attribute around your tpl with float:left and a fixed width. Look likes this

Ext.create('Ext.view.View', {
store: 'myStore',
tpl: '<tpl for=".">',
'<div style=" width: 200px; float:left;" >',
'<img style="width: 100px" src="{src}" />',
'<span style="vertical-align: top;">{caption}</span>',

4 Feb 2014, 3:10 PM
CSS float is one possibility. You could also try wrapping each entry in an inline-block element. Or even an HTML table.

The standard DataView demo uses float:


5 Feb 2014, 11:04 PM
Hey thanks Guys,
I somehow did it. Well what i did was that i used the column layout of sencha and used a tpl described in an example at the sencha site(i.e the data view with animation example). now it works. Thank you guys for helping me solve this problem :) .