PDA

View Full Version : GridPanel sorting doesn't work



PiExt
16 Jun 2009, 5:55 AM
I can see the table and the content is loaded. Reordering columns and menuDisabled works as excpected, but sort doesn't do anything. Even if I activate the menu and click on sort there.

I used columnsArray for store and grid column here but I also tried it as two separated arrays. So that shouldn't be the problem. (I hope)

Any ideas, hints or ways to debug this would be welcome!



var columnsArray = [
{name: 'stockNumber', header: '#', menuDisabled: true, sortable: true},
{name: 'status', header: 'Status', menuDisabled: true, sortable: true},
{name: 'utcBookedStart', header: 'ZF', menuDisabled: true, sortable: true},
{name: 'checkinTime', header: 'An', menuDisabled: true, sortable: true},
{name: 'checkoutTime', header: 'Ab', menuDisabled: true, sortable: true},
{name: 'time', header: 'Standzeit', menuDisabled: true, sortable: true},
{name: 'transportNumber', header: 'Transport', menuDisabled: true, sortable: true},
{name: 'licenceNumber', header: 'Kennzeichen', menuDisabled: true, sortable: true},
{name: 'spediteur', header: 'Spediteur', menuDisabled: true, sortable: true},
{name: 'stockinfo1', header: 'Ort', menuDisabled: true, sortable: true},
{name: 'stockinfo2', header: 'Pipser Nr', menuDisabled: true, sortable: true},
{name: 'stockinfo3', header: 'Ladung', menuDisabled: true, sortable: true},
{name: 'stockinfo4', header: 'Versandart', menuDisabled: true, sortable: true},
{name: 'stockinfo5', header: 'Bemerkung', menuDisabled: true, sortable: true},
{name: 'tblButtonsInt', header: '', menuDisabled: true, sortable: true}
];

var store = new Ext.data.Store({
autoLoad: true,
url: '/expedition/bookingInfoTablejson',
reader: new Ext.data.JsonReader({
root: 'rows',
id: 'number'
}, columnsArray)
});

var grid = new Ext.grid.GridPanel({
columns: columnsArray,
store: store,
renderTo: 'BookingsDiv',
fields: [{type: 'int', sortType:'asInt'}],
height: 200,
viewConfig: { forceFit: true },
frame: false,
stateId: 'Bookings',
stripeRows: true
});


greetings Philipp

Animal
16 Jun 2009, 6:09 AM
You fundamentally misunderstand.

columnsArray is just wrong.

There are two entities here.

A Record definition which is a list of Fields, their datatypes, and the mapping used to pull them out of the row object.

A ColumnModel which is a list of columns, their headings, and the dataIndex which is the Field Name to use in that column.

A GridPanel does not have a fields config.

PiExt
16 Jun 2009, 6:36 AM
Thanks for the fast reply.

right, fields is wrong here.

I know that Record and ColumnModel are different, that's why I wrote that I "tried it as two separated arrays", but it still didn't work. I am guessing every object is picking out the properties they need, so I assume it doesn't matter.
But anyway I tried it with two arrays like below and it still didn't work.

I also defined a data type now and used a JsonStore instead of Store and JsonReader.

Still no success.



var recordArray = [
{name: 'stockNumber', type: 'string'},
{name: 'status', type: 'string'},
{name: 'utcBookedStart', type: 'string'},
{name: 'checkinTime', type: 'string'},
{name: 'checkoutTime', type: 'string'},
{name: 'time', type: 'string'},
{name: 'transportNumber', type: 'string'},
{name: 'licenceNumber', type: 'string'},
{name: 'spediteur', type: 'string'},
{name: 'stockinfo1', type: 'string'},
{name: 'stockinfo2', type: 'string'},
{name: 'stockinfo3', type: 'string'},
{name: 'stockinfo4', type: 'string'},
{name: 'stockinfo5', type: 'string'},
{name: 'tblButtonsInt', type: 'string'}];

var columnsArray = [
{header: '#', menuDisabled: true, sortable: true},
{header: 'Status', menuDisabled: true, sortable: true},
{header: 'ZF', menuDisabled: true, sortable: true},
{header: 'An', menuDisabled: true, sortable: true},
{header: 'Ab', menuDisabled: true, sortable: true},
{header: 'Standzeit', menuDisabled: true, sortable: true},
{header: 'Transport', menuDisabled: true, sortable: true},
{header: 'Kennzeichen', menuDisabled: true, sortable: true},
{header: 'Spediteur', menuDisabled: true, sortable: true},
{header: 'Ort', menuDisabled: true, sortable: true},
{header: 'Pipser Nr', menuDisabled: true, sortable: true},
{header: 'Ladung', menuDisabled: true, sortable: true},
{header: 'Versandart', menuDisabled: true, sortable: true},
{header: 'Bemerkung', menuDisabled: true, sortable: true},
{header: '', menuDisabled: true, sortable: true}];

var store = new Ext.data.JsonStore({
autoLoad: true,
url: '/expedition/bookingInfoTablejson',
root: 'rows',
fields: recordArray
});

var grid = new Ext.grid.GridPanel({
columns: columnsArray,
store: store,
renderTo: 'BookingsDiv',
height: 200,
viewConfig: { forceFit: true },
frame: false,
stateId: 'Bookings',
stripeRows: true
});

Animal
16 Jun 2009, 7:03 AM
So, READING the docs for ColumnModel, looking at the examples, what's missing from each of your column definitions?

PiExt
16 Jun 2009, 7:32 AM
Thanks a lot.

I forgot dataIndex in the ColumnModel.
It the API it's optional (totally right), but it's needed here which didn't bother before because Ext used the index of the array.

Sometime I think Extjs would be nothing with you.
For every problem I had, I found an answer from you...

Animal
16 Jun 2009, 7:43 AM
No, the dataIndex of a column is mandatory (If you want data to be displayed in that column!)

Animal
16 Jun 2009, 7:48 AM
Hmm, no, I see that the code uses the column index to grab the Field at that index if you omit the dataIndex. Not a good idea if your columns are moveable!

PiExt
16 Jun 2009, 7:49 AM
Right, that's what I learned here today.
But it does show Data without dataIndex..
"If not specified, the column's index is used as an index into the Record's data Array." (API)

PiExt
16 Jun 2009, 7:50 AM
oh, I was too slow...

Animal
5 Oct 2009, 6:51 AM
Because column 10 might become column 0