PDA

View Full Version : [SOLVED] Paging a grid without PHP



paubach
4 Feb 2008, 4:42 AM
Hi, I want to use paging in a grid but I'm not allowed to install PHP on the server, so I need other solutions.

I imagine it's not possible to do that in client side (please correct if I'm wrong).

I also have deduced that I need to create an url that has to return the info.
What info should this url return and what can we send?

How do remoteSort and remoteGroup send?? What parameters I mean.

Thank you very much.

Condor
4 Feb 2008, 4:53 AM
1. You could use PagingMemoryProxy (http://extjs.com/deploy/dev/examples/locale/PagingMemoryProxy.js)

2. Remote paging and sorting requires a server that can handle start, limit, sort and dir parameters:

The server should return [limit] records, starting with record number [start] (zero-based). The resultset should be sorted on the field with name [sort] in direction [dir] ('ASC' or 'DESC').

paubach
4 Feb 2008, 5:41 AM
1. Excuse me, but don't understand why do I need the memory dataset.

2. Still don't know how to manage the groupBy for remoteGroup.

Thanks for your fast answers.

Condor
4 Feb 2008, 5:47 AM
1. The PagingMemoryProxy can be used instead of a HttpProxy if you don't have an active server at all, but still don't want to render a lot of records at once.

2. Additition for remove grouping:

Sort on the field [groupBy] first and field [sort] second.

devnull
4 Feb 2008, 8:28 AM
the paging stuff doesnt specifically require php, but it can work with any server side laguage. if you arent allowed to install any sort of server side scripting environment, well, its time to look for a better job.

paubach
4 Feb 2008, 9:40 AM
I'm happy with my job. And we use Webspeed...

paubach
5 Feb 2008, 3:10 AM
Hi Condor

I'm using Ext.data.PagingMemoryProxy and trying to initizlize this:

var myMemoryProxy = Ext.data.PagingMemoryProxy( incidents );

incidents is a string but it seems to not work:
this.addEvents is not a function
DataProxy()ext-all-debug.js (line 11108)
MemoryProxy("{"incidents":[{"ID":"CA649178", "euName":"Actaris/France/Chasseneuil", "euNum":"00055242", "assee":"...")ext-all-debug.js (line 11116)

chrome://firebug/content/blank.gif 'loadexception'


Maybe the problem is that I shouldn't use a string? What should I use instead??
Thanks,
Pau

Condor
5 Feb 2008, 5:20 AM
You need an object, not a string.

(just remove the outer " quotes or eval() the string)

paubach
5 Feb 2008, 5:44 AM
I did, but now I get

invalid label
{"incidents":[{"ID":"CA649178","euName":"Actaris/France/Chasseneuil","euNum":"00...


incidents contains:

{"incidents":[{"ID":"CA649178","euName":"Actaris/France/Chasseneuil","euNum":"00055242",
"assee":"pru","queue":"WWW","area":"SPAN","sev":"3","probSkill":"unknown","pri":"9000",
"status":"QUEUED","idle":"33","open":"33"}],"totalCount":"1"}

Condor
5 Feb 2008, 5:48 AM
You should have something like:


var incidents = {
"incidents":[{
"ID":"CA649178",
"euName":"Actaris/France/Chasseneuil",
"euNum":"00055242",
"assee":"pru",
"queue":"WWW",
"area":"SPAN",
"sev":"3 ",
"probSkill":"unknown",
"pri":"9000",
"status":"QUEUED",
"idle":"33",
"open":"33"
}],
"totalCount":"1"
};
var myMemoryProxy = Ext.data.PagingMemoryProxy(incidents);

paubach
5 Feb 2008, 6:01 AM
Yes. That's what I have... and have this error :-?

thatcoder
5 Feb 2008, 6:07 AM
How does one bind and initialize the PagingToolBar when working with a local proxy?

paubach
5 Feb 2008, 6:14 AM
Still not initialized.

Here you have the code.



var myReader = new Ext.data.JsonReader({
root: 'incidents',
totalProperty: 'totalCount'
}, [
{name: 'ID', mapping:'ID'},
{name: 'euName', mapping:'euName', type: 'string'},
{name: 'euNum', mapping:'euNum', type: 'string'},
{name: 'assee', mapping:'assee', type: 'string'},
{name: 'queue', mapping:'queue', type: 'string'},
{name: 'area', mapping:'area', type: 'string'},
{name: 'sev', mapping:'sev', type: 'int'},
{name: 'probSkill', mapping:'probSkill', type: 'string'},
{name: 'pri', mapping:'pri', type: 'int'},
{name: 'status', mapping:'status', type: 'string'},
{name: 'idle', mapping:'idle', type: 'int'},
{name: 'open', mapping:'open', type: 'int'},
]);

var myColumns = new Ext.grid.ColumnModel([
{id: 'ID', header: "ID", width: 18, sortable: true, hideable: false, dataIndex: 'ID', groupable: false},
{header: 'EU Name', width: 18, sortable: true, dataIndex: 'euName'},
{header: 'Assee', width: 18, sortable: true, dataIndex: 'assee'},
{header: 'Queue', width: 18, sortable: true, dataIndex: 'queue'},
{header: 'Area', width: 18, sortable: true, dataIndex: 'area'},
{header: 'Sev', width: 18, sortable: true, dataIndex: 'sev'},
{header: 'Prob/Skill', width: 18, sortable: true, dataIndex: 'probSkill'},
{header: 'Pri', width: 18, sortable: true, dataIndex: 'pri'},
{header: 'Status', width: 18, sortable: true, dataIndex: 'status'},
{header: 'Idle', width: 18, sortable: true, dataIndex: 'idle'},
{header: 'Open', width: 18, sortable: true, dataIndex: 'open'}
]);



var myMemoryProxy = Ext.data.PagingMemoryProxy(eval(incidents));


var myStore = new Ext.data.GroupingStore({
proxy: myMemoryProxy,
//data: incidents,
sortInfo:{field:'ID', direction:'ASC'},
groupField:'euName',
remoteSort: true,
reader: myReader});

var myView = new Ext.grid.GroupingView({
forceFit:true,
enableRowBody:true,
emptyText: 'No open incidents',
emptyGroupText: 'This site has not open incidents',
enableGroupingMenu: true,
enableNoGroups: true,
hideGroupedColumn: true,
autoFill: true,
startCollapsed: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
});

var myToolbar=new Ext.PagingToolbar({
pageSize: 15,
store: myStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: 'No topics to display'
});


var grid = new Ext.grid.GridPanel({
store: myStore,
colModel: myColumns,
view: myView,
title: ' ',
tools: [{
id:'plus',
handler: function(event, toolEl, panel) {
myView.expandAllGroups();
}
},{
id:'minus',
handler: function(event, toolEl, panel) {
myView.collapseAllGroups();
}
}],
height:420, //28*registro
bbar:myToolbar,
renderTo: 'grid',
autoScroll:true,
frame: true,
enableColumnMove:true
});




The error seems to be on "var myMemoryProxy = Ext.data.PagingMemoryProxy(eval(incidents));"

thatcoder
5 Feb 2008, 6:20 AM
There's no need to eval the JSON object, as the reader consumes JSON. Eliminate the eval function from the PagingMemoryProxy call.

BTW, have you included the ux library?

paubach
5 Feb 2008, 6:22 AM
I needed to eval incidents because it's an string.

No, I haven't included the library.

thatcoder
5 Feb 2008, 6:41 AM
I needed to eval incidents because it's an string.

No, I haven't included the library.

It might help to do that.

The source can be found here.

Save and include it.

http://extjs.com/deploy/dev/examples/locale/PagingMemoryProxy.js

paubach
5 Feb 2008, 6:43 AM
OK!! Found.
The label problem was for eval. Changed it to valueOf().

Now I get

Ext.data.PagingMemoryProxy is not a function
chrome://firebug/content/blank.gif<td class="subtitlebluedk" nowrap align="right" valign="top" >Display:&nbsp;</td..


I supose it's a problem with the ux library inclusion. Where is it?? Should I include after the ext-all.js??



Thanks for everything,
Pau

paubach
5 Feb 2008, 7:13 AM
:((

I still have the incidents as an string. How can I make it in the correct way???????

Ummmm... Today isn't one of my best days...

paubach
5 Feb 2008, 8:20 AM
Whatever I do I get the error:


this.addEvents is not a function
DataProxy()ext-all-debug.js (line 11108)
MemoryProxy(undefined)ext-all-debug.js (line 11116)
PagingMemoryProxy(Object totalCount=1 incidents=[1])PagingMemoryProxy... (line 29)

'loadexception'
I have the incidents correct now, but anyway, when I arrive to
PagingMemoryProxy(incidents)I get this error.

Any clue about what can I do?? Thanks,
Pau

thatcoder
5 Feb 2008, 8:57 AM
Whatever I do I get the error:


this.addEvents is not a function
DataProxy()ext-all-debug.js (line 11108)
MemoryProxy(undefined)ext-all-debug.js (line 11116)
PagingMemoryProxy(Object totalCount=1 incidents=[1])PagingMemoryProxy... (line 29)

'loadexception'
I have the incidents correct now, but anyway, when I arrive to
PagingMemoryProxy(incidents)I get this error.

Any clue about what can I do?? Thanks,
Pau

Like I said earlier.. pull out the eval.

String or not, your data is a json string.

paubach
5 Feb 2008, 9:00 AM
Hi!! I've just sent you an email because I'm feeling lost.

I changed this. Now I have what Condor said:


var incidents = {
"incidents":[{
"ID":"CA649178",
"euName":"Actaris/France/Chasseneuil",
"euNum":"00055242",
"assee":"pru",
"queue":"WWW",
"area":"SPAN",
"sev":"3 ",
"probSkill":"unknown",
"pri":"9000",
"status":"QUEUED",
"idle":"33",
"open":"33"
}],
"totalCount":"1"
};


var myMemoryProxy = Ext.data.PagingMemoryProxy(incidents);


but anyway get the same error :s I'm really lost...

paubach
6 Feb 2008, 3:30 AM
Can anybody find an error here?? I'm lost... Getting

this.addEvents is not a function
DataProxy()ext-all-debug.js (line 11108)
MemoryProxy(undefined)ext-all-debug.js (line 11116)
PagingMemoryProxy(Object totalCount=1 incidents=[1])PagingMemoryProxy... (line 29)

'loadexception'

paubach
6 Feb 2008, 6:39 AM
Here's the code:


var incidents={"totalCount":incidentCounter.toString(),"incidents":incidentList};

var myReader = new Ext.data.JsonReader({
root: 'incidents',
totalProperty: 'totalCount'
}, [
{name: 'ID', mapping:'ID'},
{name: 'euName', mapping:'euName', type: 'string'},
{name: 'euNum', mapping:'euNum', type: 'string'},
{name: 'assee', mapping:'assee', type: 'string'},
{name: 'queue', mapping:'queue', type: 'string'},
{name: 'area', mapping:'area', type: 'string'},
{name: 'sev', mapping:'sev', type: 'int'},
{name: 'probSkill', mapping:'probSkill', type: 'string'},
{name: 'pri', mapping:'pri', type: 'int'},
{name: 'status', mapping:'status', type: 'string'},
{name: 'idle', mapping:'idle', type: 'int'},
{name: 'open', mapping:'open', type: 'int'},
]);

var myColumns = new Ext.grid.ColumnModel([
{id: 'ID', header: "ID", width: 18, sortable: true, hideable: false, dataIndex: 'ID', groupable: false},
{header: 'EU Name', width: 18, sortable: true, dataIndex: 'euName'},
{header: 'Assee', width: 18, sortable: true, dataIndex: 'assee'},
{header: 'Queue', width: 18, sortable: true, dataIndex: 'queue'},
{header: 'Area', width: 18, sortable: true, dataIndex: 'area'},
{header: 'Sev', width: 18, sortable: true, dataIndex: 'sev'},
{header: 'Prob/Skill', width: 18, sortable: true, dataIndex: 'probSkill'},
{header: 'Pri', width: 18, sortable: true, dataIndex: 'pri'},
{header: 'Status', width: 18, sortable: true, dataIndex: 'status'},
{header: 'Idle', width: 18, sortable: true, dataIndex: 'idle'},
{header: 'Open', width: 18, sortable: true, dataIndex: 'open'}
]);
alert("myColumns");
var myMemoryProxy = Ext.data.PagingMemoryProxy(incidents);
alert("myMemProx");

var myStore = new Ext.data.GroupingStore({
proxy: myMemoryProxy,
//data: incidents,
sortInfo:{field:'ID', direction:'ASC'},
groupField:'euName',
remoteSort: true,
reader: myReader});
alert("myStre");

var myView = new Ext.grid.GroupingView({
forceFit:true,
enableRowBody:true,
emptyText: 'No open incidents',
emptyGroupText: 'This site has not open incidents',
enableGroupingMenu: true,
enableNoGroups: true,
hideGroupedColumn: true,
autoFill: true,
startCollapsed: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
});
alert("myVw");

var myToolbar=new Ext.PagingToolbar({
pageSize: 15,
store: myStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: 'No topics to display'
});
alert("myTb");


var grid = new Ext.grid.GridPanel({
store: myStore,
colModel: myColumns,
view: myView,
title: ' ',
tools: [{
id:'plus',
handler: function(event, toolEl, panel) {
myView.expandAllGroups();
}
},{
id:'minus',
handler: function(event, toolEl, panel) {
myView.collapseAllGroups();
}
}],
height:420, //28*registro
bbar:myToolbar,
renderTo: 'grid',
autoScroll:true,
frame: true,
enableColumnMove:true
});

thatcoder
6 Feb 2008, 6:55 AM
I don't see the reference to addEvents anywhere, am I missing something else in your source?

thatcoder
6 Feb 2008, 6:56 AM
in your reader, this line..


{name: 'open', mapping:'open', type: 'int'},

you have an extra , hanging around, that could cause errors.

Condor
6 Feb 2008, 6:56 AM
It would help if you used:


var myMemoryProxy = new Ext.data.PagingMemoryProxy(incidents);

thatcoder
6 Feb 2008, 6:58 AM
Remove those alerts, as they would only alert


[object]

if you would like to see your output, in firefox, install firebug, and use console.log(varName); instead.

thatcoder
6 Feb 2008, 6:59 AM
It would help if you used:


var myMemoryProxy = new Ext.data.PagingMemoryProxy(incidents);

Great find.

paubach
6 Feb 2008, 7:09 AM
The only alert that I see is: myColumns. Not the others... So the script terminates.

As Condor said it was a problem with "new". I forgot to write this.

Thanks very much to both... now I get an empty grid but will check what happens. I'll ask more here if I see I don't know how to make it work.

Again thanks.

paubach
6 Feb 2008, 7:43 AM
Hi! Now it seems to work, but with a little problem. When I order ascending doesn't order :S

Any clue?

paubach
8 Feb 2008, 3:08 AM
Any idea about how to arrange this strange behavior??

paubach
11 Feb 2008, 7:14 AM
Hi! Problem with order was ok upgrading to the version 1.3 of PagingMemoryProxy.

Still a problem grouping. The groups aren't sorted neither well done. Is there any posibility when I click on group by a field, sorting before by this field??

Thanks,

Pau

paubach
14 Feb 2008, 7:46 AM
Actualized to PagingMemoryProxy 1.3. Works ok now!!