Data view in Extjs4

[Sabareesh]

I have the following code for the dataview .The problem is i am getting the data view vertically , i wanted it to be horizontal . Am i missing something in the code .

Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
var artiststore = new Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'assets/pic/DSC03499.JPG', caption:'photo1' },
{ src:'assets/pic/DSC03500.JPG', caption:'photo2' },
{ src:'assets/pic/DSC03501.JPG', caption:'photo3' },
{ src:'assets/pic/DSC03502.JPG', caption:'photo4' }
]
});

Ext.define('Arttist_Panel', {
extend: 'Ext.panel.Panel',
alias :'widget.artist_panel',
id:'images-view',
frame:true,
width:'100%',
height : 700,
style : 'margin-left: 60px',
layout:'hbox',
layoutConfig:{
pack:'center'
},
autoScroll:true,
initComponent: function() {
var me = this;
me.items = [{
xtype: 'dataview',
id:'artistsDataView',
store: artiststore,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}" >',
'<div class="thumb"><img src="{src}" height="54" width="54" title="{caption}" ></div>',
'<span class="x-editable">{caption}</span></div>',
'</div>',
'</tpl>',
'<div class="x-clear"></div>'
),
autoHeight:true,
width:'100%',
overClass:'x-item-over',
itemSelector:'div.thumb-wrap',
emptyText: 'Loading Images....',
plugins: [
Ext.create('Ext.ux.DataView.DragSelector', {}),
Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'name'})
]
}];
me.callParent(arguments);
}
});

Thanks in Advance.

[chamacs]

The use of the hbox layout is incorrect. It is being applied to the single 'item' in the items config (your data view). This looks a lot like the data view example. Did you include the CSS that goes with that example? You'll need that to get the data view items to line up next to each other as opposed the default behavior of the <div> tag.

[Sabareesh]

thanks chamacs.

ya i figured that i was missing the data-view.css

Now it is working fine .