Why is LiveGrid not sorting???

Why is LiveGrid not sorting???

Hi everyone,

This is my first post, so forgive me if I forget to mention something.

I am working on a web app which will be using ExtJS, mostly for the grid functionality. We ran into an issue when dealing with large amounts of data. The grid was taking too long, ever with paging, so we decided to go with the LiveGrid User Extension.

The problem is this, even when I try and replicate the LiveGrid using hard-coded json in data-proxy.php, it won't sort *any* of the data. It shows the "Loading" screen briefly before coming back, unsorted.

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>ExtJS (V2 RC1) live grid (user extension)</title><!-- your usual ext stuff --><script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext-2.0.1/ext-all.js"></script><link rel="stylesheet" type="text/css" href="ext-2.0.1/resources/css/ext-all.css"/><!-- needed files for the ux --><script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedGridView.js"></script><script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedRowSelectionModel.js"></script><script type="text/javascript" src="ext-2.0.1/ux/widgets/grid/BufferedStore.js"></script><script type="text/javascript" src="ext-2.0.1/ux/widgets/BufferedGridToolbar.js"></script><script type="text/javascript" src="ext-2.0.1/ux/data/BufferedJsonReader.js"></script></head><body><h1>Live Grid Example</h1><p>This example shows how to create a grid representing a large amount of data without additional
paging buttons.</p><p>The grid sits in a Ext.Window to demonstrate the BufferedGridView's resize behavior.</p><p></p><p>Please report bugs and feature requests to Thorsten Suckow-Homberg &lt;<a href="mailto:ts@siteartwork.de">ts@siteartwork.de</a>&gt;</p><p><a href="http://www.siteartwork.de">http://www.siteartwork.de</a></p><p>Forum entry: <a href="http://extjs.com/forum/showthread.php?p=84902#post84902">http://extjs.com/forum/showthread.php?p=84902#post84902</a></p><p>Blog entry: <a href="http://www.siteartwork.de/2007/11/10/livegrid-component-with-extjs/">http://www.siteartwork.de/2007/11/10/livegrid-component-with-extjs/</a></p><p>Project home: <a href="http://www.siteartwork.de/livegrid">http://www.siteartwork.de/livegrid</a></p><script type="text/javascript">
Ext.onReady(function(){
// +----------------------------------------------------------------------------
// | How to use your new components...
// +----------------------------------------------------------------------------
/**
* BufferedJsonReader derives from Ext.data.JsonReader and allows to pass
* a version value representing the current state of the underlying data
* repository.
* Version handling on server side is totally up to the user. The version
* property should change whenever a record gets added or deleted on the server
* side, so the store can be notified of changes between the previous and current
* request. If the store notices a version change, it will fire the version change
* event. Speaking of data integrity: If there are any selections pending,
* the user can react to this event and cancel all pending selections.
*/
var bufferedReader = new Ext.ux.data.BufferedJsonReader({
root : 'response.value.items',
versionProperty : 'response.value.version',
totalProperty : 'response.value.total_count',
id : 'id'
}, [ {
name : 'number_field', sortType : 'int'
},{
name : 'string_field', sortType : 'string'
},{
name : 'date_field', sortType : 'int'
}]);
/**
* Set up your store.
* An instance of BufferedJsonReader is needed if you want to listen to
* <tt>versionchange</tt> events.
* Make sure you set the config option bufferSize high enough
* (something between 100 and 300 works good).
*/
var bufferedDataStore = new Ext.ux.grid.BufferedStore({
autoLoad : true,
bufferSize : 300,
reader : bufferedReader,
sortInfo : {field: 'number_field', direction: 'ASC'},
url : 'data-proxy.php'
});
/**
* Here is where the magic happens: BufferedGridView. The nearLimit
* is a parameter for the predictive fetch algorithm within the view.
* If your bufferSize is small, set this to a value around a third or a quarter
* of the store's bufferSize (e.g. a value of 25 for a bufferSize of 100;
* a value of 100 for a bufferSize of 300).
* The loadMask is optional but should be used to provide some visual feedback
* for the user when the store buffers (the loadMask from the GridPanel
* will only be used for initial loading, sorting and reloading).
*/
var bufferedView = new Ext.ux.grid.BufferedGridView({
nearLimit : 100,
loadMask : {
msg : 'Please wait...'
}});
/**
* You can use an instance of BufferedGridToolbar for keeping track of the
* current scroll position. It also gives you a refresh button and a loading
* image that gets activated when the store buffers.
* ...Yeah, I pretty much stole this one from the PagingToolbar!
*/
var bufferedGridToolbar = new Ext.ux.BufferedGridToolbar({
view : bufferedView,
displayInfo : true
});
/**
* BufferedRowSelectionModel introduces a different selection model and a
* new <tt>selectiondirty</tt> event.
* You can keep selections between <b>all</bb> ranges in the grid; records which
* are currently in the buffer and are selected will be added to the selection
* model as usual. Rows representing records <b>not</b> loaded in the current
* buffer will be marked using a predictive index when selected.
* Selected rows will be successively read into the selection store
* upon scrolling through the view. However, if any records get added or removed,
* and selection ranges are pending, the selectiondirty event will be triggered.
* It is up to the user to either clear the pending selections or continue
* with requesting the pending selection records from the data repository.
* To put the whole matter in a nutshell: Selected rows which represent records
* <b>not</b> in the current data store will be identified by their assumed
* index in the data repository, and <b>not</b> by their id property.
* Events such as <tt>versionchange</tt> or <tt>selectiondirty</tt>
* can help in telling if their positions in the data repository changed.
*/
var bufferedSelectionModel = new Ext.ux.grid.BufferedRowSelectionModel();
// +----------------------------------------------------------------------------
// | ... nothing fancy in here. The usual Ext setup process of the panel
// | and the column model, totally independent of the above configuration
// | options.
// +----------------------------------------------------------------------------
var colModel = new Ext.grid.ColumnModel([
{header: "Number", align : 'left', width: 160, sortable: true, dataIndex: 'number_field'},
{header: "String", align : 'left', width: 160, sortable: true, dataIndex: 'string_field'},
{header: "Date", align : 'right', width: 160, sortable: true, dataIndex: 'date_field'}
]);
var grid = new Ext.grid.GridPanel({
ds : bufferedDataStore,
enableDragDrop : false,
cm : colModel,
sm : bufferedSelectionModel,
loadMask : {
msg : 'Loading...'
},
view : bufferedView,
title : 'Large table',
bbar : bufferedGridToolbar
});
var w = new Ext.Window({
title : 'Ext.ux.grid.BufferedGridView V0.1',
maximizable : true,
resizable : true,
layout : 'fit',
items : [grid],
height : 400,
width : 500
});
w.show();
});
</script></body></html>

very nice. I am using the GroupingStore and GroupingView for my grids datastore, and the ux filters plugin, etc, so I can filter, and group columns together. I wonder if there is a way to combine all these together. I am looking at the code now, but wondered if anyone else has tried to accomplish this.

From the looks of it, it seems I can use the filter and livegrid together, but give up the grouping view, but I may be wrong.

I have changed the getRows-method in BufferedGridView - it checks wether the return parameter of ensureVisible is null (seems like Ext.Element.setXY assumes it is all the time set). There was also a bug in ensureVisible where the row-index to scroll to may have been lees than 0.