Results 1 to 3 of 3

Thread: PagingToolbar & Local Data

  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    70

    Default PagingToolbar & Local Data

    Code:
    // Portion of Ext.onReady() ---->>>>
    var storeMorphProfile = new Ext.data.JsonStore({
        id: 'storeLexAnalMorphID',
        autoLoad: false,
        fields: ['person', 'first', 'second', 'third']
    });
    
    var pgTBar = new Ext.PagingToolbar({
        id: 'pgTBarLexAnalMorphID',
        pageSize: 4,
        store: storeMorphProfile
    });
    
    var colLexAnalMorph = new Ext.grid.ColumnModel({
        defaults: {
            align:'left',
            editable: false,
            menuDisabled: true,
            resizable: true,
            sortable: false
        },
        columns: [
            {dataIndex:'person', id:'person', header:"Person"},
            {dataIndex:'first', id:'first', header:"1st"},
            {dataIndex:'second', id:'second', header:"2nd"},
            {dataIndex:'third', id:'third', header:"3rd"}
        ]
    });
    
    var gridLexAnalMorph = new Ext.grid.GridPanel({
        id: 'gridLexAnalMorphID',
        autoHeight: true,
        autoWidth: true,
        autoScroll: false,
        bbar: pgTBar,
        border: false,
        colModel: colLexAnalMorph,
        columnLines: true,
        enableColumnMove: false,
        enableColumnResize: true,
        layout: 'fit',
        store: storeMorphProfile,
        stripeRows: true,
        viewConfig: {
            scrollOffset:0,
            forceFit:true
        }
    });
    This is a simple paging requirement, but I can't figure out how to use the PagingToolbar to implement it. The catch is that all the data is contained locally. I keep this local data in an array of POJSOs which I build dynamically. Each array element will render in one grid row. The full array will contain 4-24 elements, so there's not much data. The data will always be displayed in blocks of 4 rows. These objects display just fine when I pass the array to store.load(), but they ALL display. We want 4 at a time, not all.

    The PagingToolbar renders properly as configured above. However, an attempt to click the Next button results in the following JS error in FireBug: "this.proxy is undefined".

    I want to call my own handler and not some URL or proxy. My handler will need only to know the start param. A filter on the store, passing a subset of array elements to the store.load() call, etc. That won't be the hard part.

    How do I redirect the Ext handlers on the paging buttons? If I were to use Ext.override(pgTBar, {myFN() here}), which function(s) should I override? Do I implement a specific event listener for this? What is this PagingMemoryProxy that I see referenced by my Google searches? Is there a best way to handle this? Any suggestions?

  2. #2
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    70

    Default

    The problem here was to page through data which is contained in local memory space, as opposed to getting each new page from a server. It took too long, but I solved this requirement primarily by writing a beforechange handler.
    Code:
    // The following occurs in onReady()-type processing ------------>>>
    /**
     * Handler for the beforechange event on the PagingToolbar. This replaces the default behavior of PagingToolbar
     * by calling an internal function to load the grid page, and then reset the visual controls and variables.
     * @param thisPTBar     Reference to the PagingToolbar which this supports.
     * @param o             Contains two params:
     *                          start:  Starting array index of the array of all data from which to get data
     *                                  to display for the new paging action.
     *                          limit:  Number of rows per page.
     * @return  This must always return false to avert the default call to load() (in Ext) on the store.
     */
    var onPgTBarBeforeChange = function(thisPTBar, o){
        // My own function which calls store.loadData() with the data set that I set up ...
        currentLexAnalPages.doMorphProfileGridPageLoad(o.start);
    
        // The following mimics the onLoad() function in Ext.PagingToolbar ...
        var status = thisPTBar.getPageData();
        var newPage = (o.start == 0)?1:((o.start / thisPTBar.pageSize)+1);
        this.cursor = (newPage == 1)?0:o.start;
        this.inputItem.setValue(newPage);
        this.first.setDisabled(newPage == 1);
        this.prev.setDisabled(newPage == 1);
        this.next.setDisabled(newPage == status.pages);
        this.last.setDisabled(newPage == status.pages);
        // Always return false to prevent the store.load() call in the Ext code ...
        return false;
    };
    
    var storeMorphProfile = new Ext.data.JsonStore({
        id: 'storeLexAnalMorphID',
        autoLoad: false,
        fields: ['person', 'first', 'second', 'third'],
        root: 'currentMorphProfilePage',
        successProperty: 'success',
        totalProperty: 'allRowCount'
    });
    
    var pgTBar = new Ext.PagingToolbar({
        id: 'pgTBarLexAnalMorphID',
        pageSize: morphProfileRowForms.length,  // This array length is always 4
        items: [txtLexAnalMorph],
        listeners:{
            render: onPgTBarRender,
            beforechange: onPgTBarBeforeChange
        },
        store: storeMorphProfile
    });
    The JSON object structure prepared for the store.loadData() call is in the code-block below. The full set of data is stored in objects {whose fields are ['person', 'first', 'second', 'third']} that get set into allMorphProfileRows[]. The four elements per page from this array are then copied into currentMorphProfilePage[] right before the call to store.loadData(). This occurs in doMorphProfileGridPageLoad() (not included here), as called from the beforechange handler defined above. This mimics paging from local data.
    Code:
    // Build the object for the JSON reader ...
    var morphProfileJson = {
        success:true,
        allRowCount:(morphProfileCount * this.morphProfileRowForms.length),
        currentMorphProfilePage: [],
        allMorphProfileRows: [],
        stem: []
    };

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    For local paging I recommend my PagingStore user extension (with an patch PagingToolbar that also support local filtering and insert/update/deletes).

Similar Threads

  1. Ext.ux.grid.Search (mode:local) + PagingToolbar + PagingMemoryProxy
    By caiocosta in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 26 Jul 2011, 10:06 PM
  2. PagingToolbar and local Store filtering
    By Thomas233 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 4 Aug 2009, 8:57 AM
  3. PagingToolbar with local data
    By vvorobeychik in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 19 Mar 2009, 11:45 AM
  4. local sorting and pagingination, pagingToolbar refresh
    By namita in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 28 Aug 2008, 7:16 AM
  5. Replies: 6
    Last Post: 19 Nov 2007, 6:40 AM

Posting Permissions

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