PDA

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



ospillane
16 Jan 2012, 8:38 AM
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
16 Jan 2012, 11:10 AM
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
16 Jan 2012, 1:16 PM
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
17 Jan 2012, 5:29 AM
Ah silly me..... I wasn't including the View.css file! Works perfect now :o)