PDA

View Full Version : JsonStore sorting issue



vitolini
14 Jan 2010, 5:42 PM
I have a grid with data loaded by a jsonstore. I don't have sortInfo specified in the store as the initial search doesn't need to be sorted. The store is also set to do a remoteSort. My columns are all set to be sortable, however when I click on them the request is always sent under the name of the first column no matter what column I click on.

So if my columns are like "id","name","lastname","city" no matter what column I click on, the jsonstore always sends request to the remote server as "id" in "sort" field , the "dir" parameter is set correctly as "ASC" or "DESC" it's just the name of the column that's not right.

Any ideas?

Thanks

flanders
14 Jan 2010, 5:59 PM
Can you post your code?

vitolini
15 Jan 2010, 11:32 AM
I am building the store and grid dynamically based on the resultset from the server... so there is a little bit of mixed stuff here... but is easy to read i guess...



function setupNewStore(colModel, formName, reportId)
{
tmpFields = "";
for(var i=0; i<colModel.getColumnCount(); i++)
{
tmpFields += ",'" + colModel.getDataIndex(i) + "'";
}
if(tmpFields.length > 0)
{
tmpFields = tmpFields.substr(1);
}
tmpFields = "[" + tmpFields + "]";
fields = eval(tmpFields);

var store = new Ext.data.JsonStore({
url: 'tarifftrek.cgi',
baseParams: searchParams,
root: 'Rows',
fields: fields,
totalProperty: 'TotalRowCount',
remoteSort: 'true',
reportId : reportId
});

store.columnModel = colModel;

return store;
}

function createGrid(dataStore, columnModel)
{
var pagingBar = new Ext.PagingToolbar({
pageSize: recordsPerPage,
store: dataStore,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: emptyText
});

var summaryGrid = new Ext.grid.GridPanel({
store:dataStore,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
sm:new Ext.grid.CheckboxSelectionModel(),
split: true,
anchor: '100% 100%',
cm: columnModel,
viewConfig:
{
forceFit:true,
deferEmptyText : true,
emptyText : emptyText
},
listeners :
{
rowclick: summaryGridRowClick
},
bbar: pagingBar
});

pagingBar.bind(dataStore);
return summaryGrid;
}

flanders
16 Jan 2010, 5:39 PM
I've been working on your code for a while, making it work without all your other code and trying to figure it out.

First; if someone asks for your code it is appreciated to make it as easy as possible to test your code ;)

Second: When i use your code and drop an colModel in, it creates correct requests with the 'sort' property set to either test1 or test2. So since you didn't post all the relevant code, I'm guessing the mistake is in your colModel.

Hereby the code I used and wich perfectly worked. I hope you can figure it out using this



<html>
<head>
<title>Test thingy</title>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>



</head>

<body>
<div id="some-id">
</div>

<script>
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

Ext.onReady(function() {


function setupNewStore(colModel, formName, reportId)
{
tmpFields = "";
for(var i=0; i<colModel.getColumnCount(); i++)
{
tmpFields += ",'" + colModel.getDataIndex(i) + "'";
}
if(tmpFields.length > 0)
{
tmpFields = tmpFields.substr(1);
}
tmpFields = "[" + tmpFields + "]";
fields = eval(tmpFields); // brrrr....

store = new Ext.data.JsonStore({
baseParams: {
nonsense: 'more'
},
root: 'Rows',
fields: fields,
totalProperty: 'TotalRowCount',
remoteSort: 'true',
reportId : reportId,
url: 'test/getSomething.php'
});

store.columnModel = colModel;

return store;
}

function createGrid(dataStore, columnModel)
{
var pagingBar = new Ext.PagingToolbar({
pageSize: 15,
store: dataStore,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: 'emptyText'
});

var summaryGrid = new Ext.grid.GridPanel({
store:dataStore,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
sm:new Ext.grid.CheckboxSelectionModel(),
split: true,
anchor: '100% 100%',
cm: columnModel,
viewConfig:
{
forceFit:true,
deferEmptyText : true,
emptyText : 'emptyText'
},
// listeners :
// {
// rowclick: summaryGridRowClick
// },
bbar: pagingBar
});

pagingBar.bind(dataStore);
return summaryGrid;
}

// Starting here my code, which works
colModel = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'test',
header: 'test',
sortable: true
},{
dataIndex: 'test2',
header: 'test2',
sortable: true
}]
});

dataStore = setupNewStore(colModel, null, 6);

grid = createGrid(dataStore, colModel);

grid.render('some-id');


}); // eo function onReady
</script>
</body>
</html>

vitolini
18 Jan 2010, 12:20 PM
I usually try to post all relevant code, but this time because the column model was created dynamically based on the json result i couldn't post the relevant code, but you were right; the column model I created had a problem, if initially i posted the created column model code as well, would have you saved an hour probably... at least the lesson is learnt :)

Thanks