Ext.ux.touch.grid.View: Column Headers and Data displaying vertically

[ospillane]

Hi,
I have a simple MVC app (ST2-PR3) and I am trying to display a grid using Ext.ux.touch.grid.View. The screen displays with the data but the column headers are displaying vertically down the page so I can only see the first two before the are hidden, and each row data is also displaying vertically down the left side of the screen, as in one column is under the other as apposed to being to the right of it.

Has anyone come across this before? In my Viewport I call the following component:


Ext.define('ELAMobileApp.view.queue.QueueNavView', {
extend: 'Ext.Container',
xtype: 'queuenavview',

config : {
layout: 'card',
items: [
{
xtype: 'queueresultsgrid'
},
{
xtype: 'queuesearchform'
}
]
}
})



queueresultsgrid.js code is the actual grid and looks like this:



Ext.define('TestModel', {
extend : 'Ext.data.Model',
fields : [
'company',
'price',
'change',
'pct',
'updated'
]
});

var store = Ext.create('Ext.data.Store', {
model : 'TestModel',
data : [
{ company : '3m Co', price : 71.72, change : 0.02, pct : 0.03, updated : '9/1/2010' },
{ company : 'Alcoa Inc', price : 29.01, change : 0.42, pct : 1.47, updated : '9/1/2010' } ]
});

Ext.define('ELAMobileApp.view.queue.QueueResultsGrid', {
extend: 'Ext.ux.touch.grid.View',
xtype: 'queueresultsgrid',
requires: ['Ext.ux.touch.grid.View',
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.HeaderMenu',
'Ext.ux.touch.grid.feature.Sorter'],

config : {
store : store,
features : [
{
ftype : 'Ext.ux.touch.grid.feature.HeaderMenu',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
}
],
columns : [
{
header : 'Company',
dataIndex : 'company',
style : 'padding-left: 1em;',
width : '40%',
sortable : false,
filter : { type : 'string' }
},
{
header : 'Price',
dataIndex : 'price',
style : 'text-align: center;',
width : '15%',
filter : { type : 'numeric' }
}
]
}
})

Any ideas or help would be much appreciated.
Thanks,
Orla

[mitchellsimoens]

The headers should be shown in as a toolbar horizontally by default.

One note about your code that is likely unrelated is the way you have used Ext.create to create a store and use it in your grid will mean that every grid will share the same store instance

[ospillane]

Thanks for the update, I was thinking maybe there was some layout property on perhaps a higher level component that might have been causing this, I'll keep looking into it. It's my first attempt at a Touch app so It's a learning curve!
FYI, the store is just like that for the example, my real app will make an ajax call etc, but thanks for advice;-)

[ospillane]

Ah silly me..... I wasn't including the View.css file! Works perfect now :o)