PDA

View Full Version : Grid sorting doesn't work



sutee84
11 Jan 2011, 9:33 AM
Hi Everyone!

I need help because I tried to make a sortable pagingable grid, and everything works fine, except sorting.
I set the remoteSort to true and I wrote the sorting in the php file also, and set the column sortable true, but the sorting isn't enable, and I don't know why.
Here is the js source:

Ext.onReady(function(){

InfoStore = new Ext.data.Store({
id: 'InfoStore',
successProperty: 'succ',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
url: './pages/get_infos.php',
method: 'POST'
}),
baseParams:{start:0,limit:25,sort:'datum',dir:'DESC'},

reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'kep', type: 'string', mapping: 'kep'},
{name: 'szoveg', type: 'string', mapping: 'szoveg'},
{name: 'nev', type: 'string', mapping: 'nev'},
{name: 'datum', type: 'string', mapping: 'datum'}
])
});
function renderImage(value, p, record){
return String.format(
'<img src=\"{0}\" alt=\"A kép nem megjelníthet?\" class=\"info_pic\" />',
record.data.kep);
}

InfoColumnModel = new Ext.grid.ColumnModel(
[{
header: '',
readOnly: true,
dataIndex: 'kep',
renderer: renderImage,
width: 100
},{
header: 'Szöveg',
dataIndex: 'szoveg',
width: 450,
readOnly: true
},{
header: 'Beküld?',
dataIndex: 'nev',
width: 100,
readOnly: true
},{
header: 'Dátum',
readOnly: true,
dataIndex: 'datum',
width: 70,
sortable: true
}]
);

InfoGrid = new Ext.grid.GridPanel({
id: 'InfoGrid',
store: InfoStore,
width: 800,
height: 500,
title:'Hírfolyam',
trackMouseOver:false,
disableSelection:true,
loadMask: true,
style: 'margin:50px auto 0 auto',
colModel: InfoColumnModel,
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: InfoStore,
displayInfo: true,
displayMsg: 'Megjelenítve {0} - {1} of {2}',
emptyMsg: "Nincs megjelenítend? információ!"
})
});

InfoGrid.render('info_table');
InfoStore.load();
});

And here is the php code:

$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$count = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 20;
$sort = isset($_REQUEST['sort']) ? $_REQUEST['sort'] : '';
$dir = isset($_REQUEST['dir']) ? $_REQUEST['dir'] : 'ASC';

$query = "SELECT kep,szoveg,nev,datum FROM hirfolyam WHERE mazon = '{$_SESSION['mazon']}'";
if ($sort != "") {
$query .= " ORDER BY ".$sort." ".$dir;
}
$query .= " LIMIT ".$start.",".$count;
$totals = mysql_num_rows(mysql_query("SELECT sorszam FROM hirfolyam WHERE mazon = '{$_SESSION['mazon']}'"));
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
if($nbrows>0){
while($rec = mysql_fetch_array($result)){

$arr[] = $rec;
}
$jsonresult = json_encode($arr);
echo '({"total":"'.$totals.'","results":'.$jsonresult.'})';
} else {
echo '({"total":"0", "results":""})';
}
}

sutee84
12 Jan 2011, 9:50 PM
Has somebody any idea, what is the problem, because I cant find it?

Nigel
13 Jan 2011, 11:30 AM
I'm not sure that you should have 'sort' and 'dir' in your base params - these get added to the parameters of the call made by the store if remoteSort is on (see the source code for the load method of Ext.data.Store). This may be the problem - but can you clarify what exactly is the problem - is it that the column header doesn't provide sort options in its menu (or change order on double-click), or that you don't get the data results that you expect i.e. its not reversing sort order because you forced the base params?

Have you checked exactly what parameters are being sent back to the server in the request? And that your PHP code is receiving the parameters and processing them correctly (i.e. have you checked the resulting SQL query)?

BTW, a separate point but you'll probably find performance of your SQL queries will be improved if you generate the $totals figure with a SELECT Count(*) FROM... rather than actually selecting all the rows from MySQL.

sutee84
13 Jan 2011, 9:56 PM
Thanks your answer!
My problem is that the column header doesn't provide sort options in its menu (or change order on double-click), and I checked when the grid ask the php for the datas, it posted the sort and the dir params also, and it works good, the datas are sorted in the grid, but I can't change the sorting, because there no option in the header menu.

Nigel
14 Jan 2011, 12:32 AM
I can't see anything immediately obvious that's wrong - have you tried debugging what's happening when your grid is set-up? Either use the console to interrogate the grid and check the set-up of the ColumnModel, or better, use the Illumination plug-in for Firebug as it will let you look directly at ExtJS components rather than just the DOM.
Good luck!

sutee84
14 Jan 2011, 9:04 AM
I checked and it post everytime dir:'DESC' even if I change the params and the sortinfo into ASC!
It's very strange, and I can't find the bug:(

Nigel
14 Jan 2011, 9:34 AM
Did you get rid of your baseparams like I suggested? I think these might be overriding whatever parameters to the XHR call are being generated based on the sort settings etc.

sutee84
14 Jan 2011, 10:34 AM
Yes I just wrote the start and limit to the baseparams, and I set sortinfo to sort datum ASC, but when I check the post in firebug, there are sort and dir posted params with datum and DESC, but I don't know why.

darthwes
14 Jan 2011, 12:01 PM
You mean after you click the column header and "Sort Ascending" that the XHR request generated by the grid's store has dir: 'DESC'? Can we see the code for the grid and the request/response pairs (as seen in firebug or whatever js debugger you like)

sutee84
14 Jan 2011, 11:45 PM
NO I mean that in the context menu of the header the sorting option are disabled, but I set true the remote sort, and set the sortinfo to datum ASC, but the datas in the grid are sorting DESC, and when I check what is in the post what get the datas from the php the direction is DESC, but I set ASC.

valititi
15 Jan 2011, 4:44 AM
try by
1. deleting the baseParams from your store
2. add a stateful:true to your store... this not really necessary... I use to keep over reloads window...

Then, something like...


yourStore.on({load:function(e){
var state=Ext.state.Manager.getProvider();
state.set('yourStoreId',yourGrid.store.lastOptions.params.start);
}
});
may this help ?

sutee84
15 Jan 2011, 5:02 AM
I tried it but it didn't help:(
I don't know why the sorting option is disabled?

sutee84
15 Jan 2011, 6:30 AM
I rewrote the js part of the code, but nothing changed, the sorting option in the context menu is also disabled (I don't know why), and as you can see below, I set the sorting ASC for datum, but when the grid loading it loads the data sorting datum DESC, and in firebug (console) there are "start:0,limit:25,task:'Listing',order:'datum',dir:'DESC'", and I don't know why is the direction of the sorint is DESC, when I set it to ASC:

Ext.onReady(function(){
var InfoReader = new Ext.data.JsonReader({
root:'results',
totalProperty:'total',
id:'InfoReader',
fields:[
{name:'kep',type:'string',mapping:'kep'},
{name:'szoveg',type:'string',mapping:'szoveg'},
{name:'nev',type:'string',mapping:'nev'},
{name:'datum',type:'string',mapping:'datum'}
]
});

var InfoStore = new Ext.data.Store({
id:'InfoStore',
proxy: new Ext.data.HttpProxy({
url: './pages/info_store.php',
method: 'POST'
}),
stateful:true,
reader: InfoReader,
remoteSort:true,
sortInfo:{field:'datum',direction:'ASC'}
});

function renderImage(value, p, record){
return String.format(
'<img src=\"{0}\" alt=\"A kép nem megjelníthet?\" class=\"info_pic\" />',
record.data.kep);
}

var InfoColumnModel = new Ext.grid.ColumnModel(
[{
header: '#',
dataIndex: 'kep',
renderer: renderImage,
width: 100
},{
header: 'Szöveg',
dataIndex: 'szoveg',
width: 450
},{
header: 'Beküld?',
dataIndex: 'nev',
width: 100
},{
header: 'Dátum',
dataIndex: 'datum',
sortable: true,
width: 70
}]
);

var InfoPagingBar = new Ext.PagingToolbar({
pageSize: 25,
store: InfoStore,
beforePageText:'Oldal',
afterPageText:'- {0}',
firstText:'Elejére',
lastText:'Végére',
nextText:'Következ?',
prevText:'El?z?',
refreshText:'Frissítés',
displayInfo: true,
displayMsg: 'Megjelenítve {0} - {1}, összesen: {2}',
emptyMsg: "Nincs megjelenítend? információ!"
});

var InfoGrid = new Ext.grid.GridPanel({
id: 'InfoGrid',
store: InfoStore,
cm: InfoColumnModel,
width: 800,
height: 500,
title:'Hírfolyam',
style: 'margin:50px auto 0 auto',
bbar: InfoPagingBar
});
InfoGrid.render('info_table');
InfoStore.load({params:{start:0,limit:25,task:'Listing',sort:'datum',dir:'ASC'}});
});
The php code is here:

$task = isset($_REQUEST['task']) ? $_REQUEST['task'] : 'Listing';
$start = isset($_REQUEST['start']) ? $_REQUEST['start'] : 0;
$count = isset($_REQUEST['limit']) ? $_REQUEST['limit'] : 20;
$sort = isset($_REQUEST['sort']) ? $_REQUEST['sort'] : '';
$dir = isset($_REQUEST['dir']) ? $_REQUEST['dir'] : 'ASC';

if($task=='Listing'){
$query = "SELECT kep,szoveg,nev,datum FROM hirfolyam WHERE mazon = '{$_SESSION['mazon']}'";
if ($sort != "") {
$query .= " ORDER BY ".$sort." ".$dir;
}
$query .= " LIMIT ".$start.",".$count;
$totals = mysql_result(mysql_query("SELECT COUNT(*) FROM hirfolyam WHERE mazon = '{$_SESSION['mazon']}'"),0,0);
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
if($nbrows>0){
while($rec = mysql_fetch_array($result)){

$arr[] = $rec;
}
$jsonresult = json_encode($arr);
echo '({"total":"'.$totals.'","results":'.$jsonresult.'})';
} else {
echo '({"total":"0", "results":""})';
}
}

sutee84
16 Jan 2011, 11:11 AM
Today I copied the files and the database to my notebook, and I realised that the sorting is working, but I didn't change anything. After I refresh the page the sorting also didn't work, so I tried to clear the cache, and history of the browser, and the sorting was also enabled, and it worked well. But after a refresh it also not work. Has somebody any idea what could be the problem?

valititi
20 Jan 2011, 5:08 AM
try to add this


InfoGrid.on({load:function(e){
var state=Ext.state.Manager.getProvider();
state.set('InfoStore',InfoGrid.store.lastOptions.params.start);
}
atfer the grid definition.
and eventually, on the Ex.onReady, just at the beginning :
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Me, personally, i have some extra on the php stuff...
You can try this on your php.
1. Define OUTSIDE your php list file (somewhere at the beginning of your application)
$_SESSION['myGridSTART'],$_SESSION['myGridLIMIT'],$_SESSION['myGridDIR'].

2. Then in your php list file, try this :
$_SESSION['myGridSTART']= isset($_REQUEST['start']) ? $_REQUEST['start'] : $_SESSION['myGridSTART'];
$_SESSION['myGridLIMIT']= isset($_REQUEST['limit']) ? $_REQUEST['limit'] : $_SESSION['myGridLIMIT'];
$_SESSION['myGridDIR']= isset($_REQUEST['dir']) ? $_REQUEST['dir'] : $_SESSION['myGridDIR'];

$start = $_SESSION['myGridSTART'];
$count = $_SESSION['myGridSTART'];
$dir = $_SESSION['myGridSTART'];
...
may this help ?

sutee84
20 Jan 2011, 9:19 AM
Thanks!
I tried it, but unforunatelly it didn't helo, the problem is the same, after I refresh the page (with CTRL+R, or refresh button in the browser, or just the tab in the Tabpanel) the sortable options are disabled in the context menu, and if I click on the header of a column it dosn't sort the column.
I can't imagine what is the problem!

nicholasnet
20 Jan 2011, 8:05 PM
I did not looked at your whole code. But at a quick glance I saw that you have put only one column sotable: true in your column model. Try this in grid config. Use Firebug and post the result.


var grid = new Ext.grid.GridPanel
({
........
listeners:
{
scope: this,
afterrender: function(grd)
{
var cm = grd.getColumnModel();
console.log(cm);
///Try this after
Ext.each(cm, funciton(m)
{
m.config.sortable = true;
},grd);
console.log(m);
}
}
});

sutee84
21 Jan 2011, 8:41 AM
Hi!

I tried but I didn't work, I get 1 error in firebug: "missing ) after argument list { "

Regards,
Sutee84

nicholasnet
21 Jan 2011, 11:08 AM
Hi!

I tried but I didn't work, I get 1 error in firebug: "missing ) after argument list { "

Regards,
Sutee84
Which line? It seems like there is error in your code itself.

valititi
21 Jan 2011, 11:39 AM
"I get 1 error in firebug: "missing ) after argument list { "
You need to check up the syntax of your code first.
If there are still somes afterwards issues I may help.

sutee84
21 Jan 2011, 11:38 PM
The problem is with this function:
Ext.each(cm, funciton(m)
{
m.config.sortable = true;
},grd);
console.log(m);
If i put it into comment, everything works well.

Condor
22 Jan 2011, 1:15 AM
Shouldn't that be:

var cm = grd.getColumnModel();
Ext.each(cm.config, function(col){
col.config.sortable = true;
});

sutee84
22 Jan 2011, 2:46 AM
Thank you very much, and thanks for nicholasnet also, It works!
:)