PDA

View Full Version : paging grid (figuring it out + example opera bug)



code_berzerker
8 May 2007, 1:46 AM
I'll start with the bug and then state my problem.
I have noticed that paging grid example is messed in Opera (9.20 in my case). It's totally unusable. Did any of you find out how to make it work?

And to my main question. I'm trying to figure out how does paging grid work. In the example data comes from php script at url: http://www.yui-ext.com/forum2/topics-remote.php. does the grid read all the pages at once and page them from memory? Or does it communicate with the script to get desired data prepared (sorted and the right page selected) on server side? If the latter, what parameters are sent to script?

Every hint will be much appreciated >:)

PS I'm new to Ext so forgive me any stupidity and such :">

jsakalos
8 May 2007, 1:54 AM
Re bug: Confirmed. Opera 9.20 on Linux box.
Re paging: Only data of one page is loaded from server. For that, paging toolbar generates params like this:



{params: {start:0, limit:20}}


Use firebug to discover all params of server request.

jsakalos
8 May 2007, 1:57 AM
Re sorting: Sorting depends on store's remoteSort parameter. If remoteSort:true the request is sent to server to sort data if remoteSort:false the loaded page is sorted locally.

code_berzerker
8 May 2007, 2:15 AM
Thanx for quick reply!
Well since paging example doesnt work in Opera I cant really use it for production. I'll try to figure out witch component causes weird behaviour and I'll try to disable it and maybe implement in other way so it starts to work..

Or maybe you suggest using other example and turning it to paging grid creating paging controls on my own?

code_berzerker
8 May 2007, 2:51 AM
Ok it started to display properly when I commented the following code in paging.js:



// make the grid resizable, do before render for better performance
/*var rz = new Ext.Resizable('topic-grid', {
wrap:true,
minHeight:100,
pinned:true,
handles: 's'
});
rz.on('resize', grid.autoSize, grid);*/


I guess I can live with it not being resizable till it gets fixed. I hope this report will also help to locate and fix the bug.

code_berzerker
8 May 2007, 3:21 AM
Ok this time this is beyond my capabilities of finding way around. After doing above (previous post) the grid loads fine, but then after I press next to load 2nd page i get endless loading sequence and nothing happens (it works fine in FF).

This is Opera js error after pushing next:



JavaScript - http://some.server/ext/examples/grid/paging.html
Event thread: click
Error:
Unhandled exception: [Object InternalException]
code: 6
message: WRONG_ARGUMENTS_ERR
Backtrace:
Line 87 of linked script http://some.server/ext/ext-all.js
this.head.removeChild(document.getElementById(_e.scriptId));
clearTimeout(_e.timeoutId);
if (_f)
else
Line 87 of linked script http://some.server/ext/ext-all.js
if (this.isLoading())
Line 87 of linked script http://some.server/ext/ext-all.js
if (this.fireEvent("beforeload", this, _2) !== false)
else
Line 71 of linked script http://some.server/ext/ext-all.js
_14 = _14 || {};
if (this.fireEvent("beforeload", this, _14) !== false)
Line 119 of linked script http://some.server/ext/ext-all.js
var ds = this.ds;
switch (_14)
{
case "first":
case "prev":
case "next":
case "last":
case "refresh":
Line 9 of linked script http://some.server/ext/adapter/yui/ext-yui-adapter.js
var _52 = _4f || arguments;
if (_50 === true)
else
return _51.apply(obj || window, _52);
Line 113 of linked script http://some.server/ext/ext-all.js
if (e)
if (! this.disabled)
Line 17 of linked script http://some.server/ext/ext-all.js
e = Ext.EventObject.setEvent(e);
var t;
if (o.delegate)
else
if (o.stopEvent === true)
if (o.preventDefault === true)
if (o.stopPropagation === true)
if (o.normalized === false)
fn.call(_21 || el, e, t, o);
Line 13 of linked script http://some.server/ext/adapter/yui/yui-utilities.js
return fn.call(_1f, YAHOO.util.Event.getEvent(e), obj);
At unknown location
[statement source code not available]

jsakalos
8 May 2007, 3:42 AM
Only thing I could recommend is to use FF for production. ;)

code_berzerker
8 May 2007, 4:09 AM
Only thing I could recommend is to use FF for production. ;)
I cannot dictate what browser should be used by users so this app has to work with all popular browsers.

I have another backtrace from opera for the same operation (this time using jquery):



JavaScript - http://some.server/
Event thread: click
Error:
Unhandled exception: [Object InternalException]
code: 6
message: WRONG_ARGUMENTS_ERR
Backtrace:
Line 10145 of linked script http://some.server/js/ext-all-debug.js
this.head.removeChild(document.getElementById(trans.scriptId));
Line 10139 of linked script http://some.server/js/ext-all-debug.js
this.destroyTrans(this.trans);
Line 10114 of linked script http://some.server/js/ext-all-debug.js
this.abort();
Line 9597 of linked script http://some.server/js/ext-all-debug.js
this.proxy.load(p, this.reader, this.loadRecords, this, options);
Line 14189 of linked script http://some.server/js/ext-all-debug.js
ds.load({params : {start : this.cursor + this.pageSize, limit : this.pageSize}});
Line 9 of linked script http://some.server/js/adapter/jquery/ext-jquery-adapter.js
var _52 = _4f || arguments;
if (_50 === true)
else
return _51.apply(obj || window, _52);
Line 13483 of linked script http://some.server/js/ext-all-debug.js
this.handler.call(this.scope || this, this, e);
Line 1538 of linked script http://some.server/js/ext-all-debug.js
fn.call(scope || el, e, t, o);
Line 1 of eval script
if (typeof jQuery == "undefined" || jQuery.event.triggered)
event = jQuery.event.fix(event || window.event || {});
var returnValue;
var c = this.$events[event.type];
var args = [].slice.call(arguments, 1);
args.unshift(event);
for (j in c)
if (jQuery.browser.msie)
return returnValue;
At unknown location
[statement source code not available]

code_berzerker
8 May 2007, 5:27 AM
Another update. I have created custom button on paging toolbar:



paging.add('-', {
pressed: false,
enableToggle: false,
text: 'next',
handler: function(){
ds.load({params:{start:25, limit:25, forumId: 4}});
}
});


Works fine in FF. In opera it causes the same error as using original button on paging toolbar.

Its quite weird that first call to ds.load(...) is succesfull and second ends with error.

code_berzerker
8 May 2007, 6:23 AM
Ok finally I've been able to make a dirty fix to this problem.
Since I've notices that first call to ds.load completes succesfully I though why not reinitialise ds object do next call to ds.load is also first? Lame? Yes. Works? Yes :)

Here's code.

At the beginning of paging.js example change DS initialization to be done in function:


// create the Data Store
function initDS()
{
ds = new Ext.data.Store({
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.yui-ext.com/forum2/topics-remote.php'
}),

// create reader that reads the Topic records
reader: new Ext.data.JsonReader({
root: 'topics',
totalProperty: 'totalCount',
id: 'topic_id'
}, [
{name: 'title', mapping: 'topic_title'},
{name: 'author', mapping: 'username'},
{name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
{name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
{name: 'lastPoster', mapping: 'user2'},
{name: 'excerpt', mapping: 'post_text'}
]),

// turn on remote sorting
remoteSort: true
});
ds.setDefaultSort('lastPost', 'desc');
return ds;
}

var ds = initDS();


Then add below code before creating paging toolbar to make buttons work in Opera:



Ext.PagingToolbar.prototype.onClick = function(which){
var total = this.ds.getTotalCount();
grid.reconfigure(initDS(), cm);
grid.loadMask = new Ext.LoadMask(grid.container,
Ext.apply({store:grid.dataSource}, true));
this.ds = grid.dataSource;
this.bind(grid.dataSource);
switch(which){
case "first":
grid.dataSource.load({params:{start: 0, limit: this.pageSize}});
break;
case "prev":
this.ds.load({params:{start: Math.max(0, this.cursor-this.pageSize), limit: this.pageSize}});
break;
case "next":
grid.dataSource.load({params:{start: this.cursor+this.pageSize, limit: this.pageSize}});
break;
case "last":
var extra = total % this.pageSize;
var lastStart = extra ? (total - extra) : total-this.pageSize;
grid.dataSource.load({params:{start: lastStart, limit: this.pageSize}});
break;
case "refresh":
grid.dataSource.load({params:{start: this.cursor, limit: this.pageSize}});
break;
}
this.updateInfo();
}

Ext.PagingToolbar.prototype.onPagingKeydown = function(e){
var k = e.getKey();
var d = this.getPageData();
if(k == e.RETURN){
var v = this.field.dom.value, pageNum;
if(!v || isNaN(pageNum = parseInt(v, 10))){
this.field.dom.value = d.activePage;
return;
}
pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
grid.reconfigure(initDS(), cm);
grid.loadMask = new Ext.LoadMask(grid.container,
Ext.apply({store:grid.dataSource}, true));
this.ds = grid.dataSource;
this.bind(grid.dataSource);
grid.dataSource.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
e.stopEvent();
}
else if(k == e.HOME || (k == e.UP && e.ctrlKey) || (k == e.PAGEUP && e.ctrlKey) || (k == e.RIGHT && e.ctrlKey) || k == e.END || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey))
{
var pageNum = (k == e.HOME || (k == e.DOWN && e.ctrlKey) || (k == e.LEFT && e.ctrlKey) || (k == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
this.field.dom.value = pageNum;
grid.reconfigure(initDS(), cm);
grid.loadMask = new Ext.LoadMask(grid.container,
Ext.apply({store:grid.dataSource}, true));
this.ds = grid.dataSource;
this.bind(grid.dataSource);
grid.dataSource.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
e.stopEvent();
}
else if(k == e.UP || k == e.RIGHT || k == e.PAGEUP || k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
{
var v = this.field.dom.value, pageNum;
var increment = (e.shiftKey) ? 10 : 1;
if(k == e.DOWN || k == e.LEFT || k == e.PAGEDOWN)
increment *= -1;
if(!v || isNaN(pageNum = parseInt(v, 10))) {
this.field.dom.value = d.activePage;
return;
}
else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
{
this.field.dom.value = parseInt(v, 10) + increment;
pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
grid.reconfigure(initDS(), cm);
grid.loadMask = new Ext.LoadMask(grid.container,
Ext.apply({store:grid.dataSource}, true));
this.ds = grid.dataSource;
this.bind(grid.dataSource);
grid.dataSource.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
}
e.stopEvent();
}
}


Again its quite ugly, but at least it works ;)

code_berzerker
9 May 2007, 12:37 AM
I have also found out that sorting paging gdid also triggers this error. Anyway most if not all of these problems are caused by Ext.data.Store or Ext.data.ScriptTagProxy. Dont know about Ext.data.HttpProxy yet but when I'll test it I'll post my findings.