Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: paging grid (figuring it out + example opera bug)

  1. #1

    Default paging grid (figuring it out + example opera bug)

    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

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    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:

    PHP Code:
    {params: {start:0limit:20}} 
    Use firebug to discover all params of server request.

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    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.

  4. #4

    Default

    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?

  5. #5

    Default

    Ok it started to display properly when I commented the following code in paging.js:

    Code:
        // 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.

  6. #6

    Default

    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:

    Code:
    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]

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Only thing I could recommend is to use FF for production.

  8. #8

    Default

    Quote Originally Posted by jsakalos View Post
    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):

    Code:
    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]

  9. #9

    Default

    Another update. I have created custom button on paging toolbar:

    Code:
    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.

  10. #10

    Default

    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:
    Code:
    // 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:
    Code:
        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

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •