View Full Version : Column doesn't sort + start/limit dataload neither

10 Oct 2007, 7:06 AM
Hi there,
I try to make a remote paging Grid with XML and i got 2 issues : the sortable column doesn't work and the load of the store get all the rows instead the 10 first ones etc ...

Here my javascript code :

function AdaptiveTable(id,url,record,arrIndex,arrColumn,width,height,pageSize)

AdaptiveTable.prototype.init = function()

//insert a div
var divRoot = Ext.get(this.id);

var o = new Array();
for(var i=0;i<this.arrIndex.length;i++){
o[i]={name:this.arrIndex[i],type: 'string'};
var Record = Ext.data.Record.create(o);

// Define the data store, i.e. the element that will collect and store the data to display in the grid.
var ds = new Ext.data.Store({

// The data will collected by the "proxy" object
// The proxy object will use http to collect them
proxy: new Ext.data.HttpProxy({url: this.url}),

// The data collected by the proxy will be read by the reader object.
// As the data will be formated as XML the reader is an XMLReader.
reader: new Ext.data.XmlReader({
// The main tag for each record. In the example: User (not UserList!)
record: this.record,
id : 'ID',
totalRecords : 'results'
}, Record),
// The target defined in the HttpProxy send the records already sorted.
remoteSort: true

//Define the default sort order:
// - 1st: the dataIndex if the column
// - 2nd: the order ("DESC" or "ASC").
ds.setDefaultSort(this.arrIndex[i], 'ASC');

//Define the Columns of the grid:
// - the header, i.e. the title of the column that will be displayed in the grid
// - the dataIndex, i.e. the name of the tab in the XML that contains the data to display
// - the width of the document: in pixel only! Percents are not available.
var t = new Array();
for(var i=0;i<this.arrIndex.length;i++){
t[i]={id:this.arrIndex[i], header: this.arrColumn[i], dataIndex: this.arrIndex[i], sortable: true};
var cm = new Ext.grid.ColumnModel(t);
//By default columns are sortable in this exemple.
//enter false if you don't want your columns to be sortable.
cm.defaultSortable = true;

//Create the grid object itself, based on:
// - the data store defined before (ds in this exemple).
// - the column model defined before (cm in this exemple).
// - the selection model: set if it possible to select one row only (true value) or several rows (replace true by false).
// - the rest is static.
var grid = new Ext.grid.Grid(this.id+'_grid', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
,loadMask: true

//Make the grid resizable, do before render for better performance
//Remove this part if you don't want your grid to be resizable.
var rz = new Ext.Resizable(this.id+'_grid', {
wrap:true,//Equivalent to wrap css property.
minHeight:100,// This property speaks by itself
handles: 's'
rz.on('resize', grid.autoSize, grid);

var layout = Ext.BorderLayout.create({
center: {
panels: [new Ext.GridPanel(grid)]
}, this.id);

//Render the grid

/*var gridHead = grid.getView().getHeaderPanel(true);
var tbcomments = new Ext.Toolbar(gridHead);
grid.AddLiveSearch( tbcomments ); */

//Get the grid's footer to had the paging toolbar
var gridFoot = grid.getView().getFooterPanel(true);

//Add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: this.pageSize,//The number of elements displayed at once in the grid.
displayInfo: true,
displayMsg: 'Displaying users {0} - {1} of {2}', //The message displayed in the Paging toolbar.
emptyMsg: "Nothing to display"// The message displayed if there is no elements to display.

//Trigger the data store load:
// - start is the default start index (0 here and in most cases).
// - limit is the number of elements displayed at once in the grid (same as in the Paging toolbar object before).
ds.load({params:{start:0, limit:this.pageSize}});

AdaptiveTable.prototype.display = function()
Ext.onReady(this.init, this, true);

The HTML/script Code :

<script type="text/javascript">
var arrIndex = ['FirstName','LastName','Age','BirthDate'];
var arrColumn = ['First Name','Last Name','Age','Date of Birth'];
var acc = new AdaptiveTable('grid','XMLData.xml','User',arrIndex,arrColumn,390,200,5);

And my XML files :

<FirstName>1 first Name</FirstName>

<FirstName>2 first Name</FirstName>

<FirstName>3 first Name</FirstName>

<FirstName>4 first Name</FirstName>

I'm kinda lost and try everything i guess and i wonder if it's not a bug ... please help me , i'm getting nuts !

thank you


10 Oct 2007, 8:51 AM
the remote sorting/paging functions depend heavily on having the correct implementation on the backend as well, to create the right sql queries.
use firefox to examine the vars being sent by ext if youre not sure, and log your sql queries in the backend so you can examine them to find out why they arent sorting or paging.
*on edit*
now i see it looks like you are trying to make a paging/sorting grid using static xml files? from what i understand, this wnt be possible unless you have code in the backend to cut up the xml file and do this for you.

11 Oct 2007, 12:26 AM
Ok thank you i did't realize that problem ... i'm dumb ...
Thank you :)