this.proxy is undifened EXT JS paging

Question

I have a store :

var store = new Ext.data.JsonStore({
        root: 'list',
        fields: rec,
        totalProperty:'totalCount',
        pruneModifiedRecords:true
    });

And want to do paging.

my paging toolbar :

var paging = new Ext.PagingToolbar({
        pageSize    :   limit,
        width       :   600,
        store       :   store,
        displayInfo :   true,        
        displayMsg  :   'Total: {2}, (Show:{0}-{1})',
        emptyMsg    :   "No data"
    });

and my grid :

var grid = new Ext.grid.EditorGridPanel({
        region:'center',
        stripeRows: true,
        frame: false,
        border:false,
        loadMask: {msg : 'Loading...'},
        trackMouseOver:false,
        store: store,
        cm: cm,
        sm: sm,
        tbar:gridTbar,
        bbar:   paging,
        viewConfig: {enableRowBody:true,emptyText: 'no data'}
    });

And when button pressed load data from database :

var limit= 100;
    function storeDoldur(){
        Ext.Ajax.request({
            url: '../project/listData.ajax',
            params:{
                date:date.getRawValue(),
                start:0, 
                limit:limit
            },
            success:function(response,options){
                var res= Ext.decode(response.responseText);
                if(res.success){
                    store.loadData(res);
                    grid.getView().refresh();
                    grid.doLayout();
                }
                else{
                    Ext.MessageBox.alert("result",res.message);
                }
                globalMask.hide();
            },
            failure: function(response,options) {
                globalMask.hide();
                Ext.MessageBox.alert(error);
            }
        });
    }

Here is the problem :

Total count is 108. First 100 resut is showing with success but when i press next page button ext says :

TypeError: this.proxy is undefined ...ueUrl(this.proxy,e)){c.params.xaction=e}this.proxy.request(Ext.data.Api.actions[...

How can fix this problem?

Edit :

var store = new Ext.data.JsonStore({
        root: 'list',
        **url: '../project/listData.ajax',**
        fields: rec,
        totalProperty:'totalCount',
        pruneModifiedRecords:true,
        autoLoad : false,           
    });

ajax request post this params : date,start,limit

I click second page button, in backend code database returns null because of date is null. Second page request params are start and limit values. Don't send date parameter??

mindparse mindparse · Accepted Answer · 2015-03-30T19:27:14

In order for the paging toolbar to work, your store must be configured with a proxy with a url property, so that when you click the next\previous button on the toolbar the store can fetch the required page of data from the server.

In your code, your are making a separate Ajax request and so your store has no idea about the url to use for fetching the next page.

Take a look at the example here => http://docs.sencha.com/extjs/4.2.0/#!/example/grid/paging.html and look at the paging.js source code linked to at the top of that page. That should give you enough to proceed.

You should also listen to the store load event to handle the successful fetch of data.

EDIT

For ExtJS 3 you should make use of baseParams in your store config object (http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-cfg-baseParams). You can also set these dynamically, so in your case in your storeDoldur function rather than the Ajax approach you would do something like this:

var limit= 100;
function storeDoldur(){
    store.setBaseParam('date', date.getRawValue());

    store.load({
        params: {
            start: 0,
            limit: limit
        },
        callback: function() {
        }
    });
}

Again, do not use an Ajax request, instead use a properly configured store with a proxy as that's what the paging toolbar expects in order to work properly. In the edit above, setting an extra base parameter is necessary so it gets passed in subsequent request when using the paging toolbar next\previous buttons.

Notice when calling load on the store, I have added an empty stub for a callback function which you can use to handle the response further when its returned back from the server - http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.data.Store-method-load

You wont need to use the code in your success handler from the Ajax request you originally used, since loading data (including other pages using the paging toolbar) into the store will cause the grid to update automatically.

this.proxy is undifened EXT JS paging

1 Answers