PDA

View Full Version : Horizontal Data inside Ext.view



ironhide707
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 :)

Phantoll
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>',
'</div>',
'</tpl>'
})

skirtle
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:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/view/data-view.html

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