Ext js Updating the total count of a paging toolbar on the fly

This should be fairly simple but I haven't found a way to do it yet.

I am using a ExtJs v.3.3.

I have a grid panel that allows record deletion with context menu.

The grid has a paging toolbar that is attached to the panel store.

The deletion process sends an ajax request to the server, on success I remove the record from the store (开发者_运维问答using the remove method).

The thing is that the paging toolbar does not reflect the change in the store , that is the total amount of records is unchanged until the store is reloaded.

Is there any way to set the total amount of records in the paging toolbar?

Thanks

This works like a charm for ExtJs ver 4.1.3.

gridStore.add(record);                    //Add the record to the store    
gridStore.totalCount = gridStore.count(); //update the totalCount property of Store
pagingToolbar.onLoad();                   //Refresh the display message on paging tool bar

Are you not able to return the totalProperty value in the response after the data has been deleted in the DB?

EDIT:

You'll need to get your response constructed properly first. This is how it should look according to the API Docs for the Paging Toolbar.

If using store's autoLoad configuration:

  var myStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        totalProperty: 'results', 
        ...
    }),
    ...
    });
    var myStore = new Ext.data.Store({
    autoLoad: {params:{start: 0, limit: 25}},
    ...
    });

The packet sent back from the server would have this form:

{
"success": true,
"results": 2000, 
"rows": [ // *Note: this must be an Array 
    { "id":  1, "name": "Bill", "occupation": "Gardener" },
    { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
    ...
    { "id": 25, "name":  "Sue", "occupation": "Botanist" }
]
}

This worked fine for me:

me.gridStore.add(data);

// Manually update the paging toolbar.
me.gridStore.totalCount = 500;
me.pagingToolbar.onLoad();

I had a similar problem when getting results from a third party api which had a separate url for the item count. I created a new class inheriting from the pagingtoolbar with an additional updatePager() function:

updatePager : function(){
    var me = this,
        pageData,
        currPage,
        pageCount,
        afterText,
        count,
        isEmpty;

    count = me.store.getCount();
    isEmpty = count === 0;
    if (!isEmpty) {
        pageData = me.getPageData();
        currPage = pageData.currentPage;
        pageCount = pageData.pageCount;
        afterText = Ext.String.format(me.afterPageText, isNaN(pageCount) ? 1 : pageCount);
    } else {
        currPage = 0;
        pageCount = 0;
        afterText = Ext.String.format(me.afterPageText, 0);
    }

    Ext.suspendLayouts();
    me.child('#afterTextItem').setText(afterText);
    me.child('#inputItem').setDisabled(isEmpty).setValue(currPage);
    me.child('#first').setDisabled(currPage === 1 || isEmpty);
    me.child('#prev').setDisabled(currPage === 1  || isEmpty);
    me.child('#next').setDisabled(currPage === pageCount  || isEmpty);
    me.child('#last').setDisabled(currPage === pageCount  || isEmpty);
    me.child('#refresh').enable();
    me.updateInfo();
    Ext.resumeLayouts(true);

    if (me.rendered) {
        me.fireEvent('change', me, pageData);
    }
}

});

I added an itemId to it when adding to the dock

    dockedItems: [{
            xtype: 'dynamicpagingtoolbar',
            itemId: 'pager_id',
            dock: 'bottom',
            store: 'CompoundPharmacologyPaginatedStore',
            displayInfo: true
        }],

I added a setTotalCount() function to the associated store:

setTotalCount: function(count) {
    this.totalCount = count;
}

Then when you want to update it call store.setTotalCount(total) and then pager.updatePager(). Remember that you will have get the pager first using something like

pager = grid_view.down('#pager_id');

"The deletion process sends an ajax request to the server, on success I remove the record from the store (using the remove method)..." - this suggest that you got method that handle "delete" action - and if you using Ext.PagingToolbar - just add one more line like this:

(this).YourPagingToolbar.doRefresh()

I put (this) in () because you did not provide any code example so I not sure how you defined it

store.totalLength = store.totalLength - 1;

this would change the number of total rows in the store, but I am not sure if this change would be reflected by the paging toolbar.

I had a similar situation when trying to use multiple paging toolbars (top/bottom of grid). The only place in the paging toolbar that updates the display gets called on store 'load'. So you can fire the event manually (but beware of unintended consequences!). In my case this worked well when run from the beforechange listener of one of my toolbars:

myStore.fireEvent('load', myStore, myStore.data.items, myStore.lastOptions);

Or ... you could override or extend the PagingToolbar to add a public method which would call or override the onLoad function

If you have multiple pages in paging toolbar, and perform insert/remove operation locally from store then use below snippet.

updatePagingToolbar: function (pagingToolbar) {
    var store = pagingToolbar.getStore()
    , affectedChanges = store.getCount() - store.config.pageSize;

    if (pagingToolbar.store.totalCount > store.config.pageSize)
        pagingToolbar.store.totalCount += affectedChanges;
    else
        pagingToolbar.store.totalCount = store.getCount();
    pagingToolbar.onLoad();
}