View Full Version : Possible to auto-sort a GridPanel backed by an ArrayStore?

15 Feb 2011, 6:04 PM
I have a GridPanel backed by an ArrayStore that is used to translate relational data into/from JSON. The data is created by the user adding rows to the GridPanel. The records are time-based and are always sorted by time (only).

ArrayStore.addSorted(...) works fine as long as the time column is currently sorted - for example, with ArrayStore.sort( 'TimeOfDay', 'ASC' ). addSorted(...) merely appends if the column isn't sorted.

I don't like the column heading decoration when it's sorted; it implies that other sorting is possible. Since I can't figure out how to disable the decoration, I thought of adding the user's input directly to the array behind ArrayStore and using ArrayStore.sortInfo to provide a default sort:

sortInfo: {field:'TimeOfDay', direction:'ASC'}

It appears sortInfo only supports load operations (I was using the data config). I defined a Proxy so that I could use load:

var ay_FieldsInSchedule = new Array( // Used for multiple ArrayStores.
{ name: 'TimeOfDay', type: 'string' }, // Case of name needn't match field.
{ name: 'Activity', type: 'string' } );

// Create a Proxy to make load happy; provide some unsorted data.
var mp_Schedule = new Ext.data.MemoryProxy(
[ ['12:00', 'lunch'],
['08:00', 'nap' ],
['13:00', 'nap' ]
] );

var as_Schedule = new Ext.data.ArrayStore(
{ autoLoad: true,
fields: ay_FieldsInSchedule,
id: 'ScheduleStore',
idIndex: 0,
proxy: mp_Schedule
} );

var GP_Schedule = new Ext.grid.GridPanel(
{ colModel: new Ext.grid.ColumnModel(
{ columns:
[ { dataIndex: 'TimeOfDay', // Case must match "name" in field defs
header: 'Time',
width: 40
{ dataIndex: 'Activity',
header: 'Accomplished',
width: 150
{ fixed: true,
menuDisabled: true, // Eliminates drop-down but limits headermousedown to header edges
sortable: false// Not necessary
} ),
disableSelection: true, // Turn off the blue selection highlighting
enableColumnMove: false, // Also fixes headermousedown for entire header
{ cellmousedown: ScheduleCellClick, // cellmouseclick requires press AND release within cell
headermousedown: ScheduleHeaderClick
renderTo: document.getElementById( 'ScheduleDiv' ),
{ field: 'TimeOfDay',
direction: 'ASC'
store: as_Schedule,
trackMouseOver: false,
{ markDirty: false
} );

function RowAdd()
{ var as_Schedule;
var rt_Event;
var rc_Event;

as_Schedule = GP_Schedule.getStore();
rt_Event = as_Schedule.recordType;
rc_Event = new rt_Event(
{ TimeOfDay: document.getElementById( 'TimeOfDayField' ).value,
Activity: 'Snack'
} );

as_Schedule.addSorted( rc_Event );
if( as_Schedule.getCount() >= 5 )
{ as_Schedule.reload();
// as_ScheduleEditor.sort( 'TimeOfDay', 'ASC' );

With this code, the ArrayStore is not sorted when initially loaded, nor when records are added by the user, nor (after five records exist) when the ArrayStore is reloaded.

The API document for ArrayStore.sortInfo suggests that it affects local sorts:
"Note that for local sorting, the direction property is case-sensitive."
but I can't get it to sort - using data or a Proxy.

Can anyone suggest a way to get sortInfo to work with an ArrayStore? (Or is there a way to turn off the "sort" decoration for grid column headers?)

17 Feb 2011, 12:41 PM
For those who read my code: sortInfo belongs in the config object for the ArrayStore - not in GridPanel. The GridPanel will then auto-sort whether using the data config or using a MemoryProxy, and whether or not sortable is false in the column configs of ColumnModel.

sortInfo turns on the shading and sort-direction icon for the sorted column, which I don't want in this case. I don't see a way to disable it; creating a hidden sorted column seems to do the trick.