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

Question

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

Lumbago

Good question. This value is obtained from underlying store's reader (via Ext.data.Store.getTotalCount()) and doesn't seem to be easily changeable. – Langsdon

Answer 1

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

Langley

Answer 2

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" }
]
}

Besnard

this is my return statement: {success:true} – Lumbago

In your PHP code, you will need to include this the totalProperty in your response object. Please refer to the documentation for the Paging toolbar as well. It will give you a good idea of how your will need to construct your code & queries to get the right result. – Besnard

In addition, the Paging Toolbar cannot function properly unless you construct the result. – Besnard

That is precisely the point, I do not need a full heavy loaded result from the server. The server just informs the client that the deletion operation has succeeded and he can remove the record safely from the grid. I am looking for a way to manipulate the paging toolbar without having to reload a full data set from the server. I know how to send a proper fully loaded result that will work , and as bensiu suggester in the first answer I could just call doRefresh() it is just not what I am looking for. – Lumbago

Answer 3

This worked fine for me:

me.gridStore.add(data);

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

Margarine

Answer 4

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');

Ivied

Answer 5

"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

Epigastrium

yes but this requires my to make an unnessacery call to the server. I know the deletion was successful since the server returns success – Lumbago

So... you are using a Paging Toolbar but find making the calls necessary? Are you dealing with large amounts of data? – Besnard

Not to large, It is around 40 records. (I understand why your are asking... ) 2 things about that : 1) the amount of data does not imply the amount of stress the server has to deal with while trying to retrieve the data. it might just be that the query that returns the small data set is very complicated. 2) the amount of records return does not change the necessity of a client side manipulation option for the paging toolbar. – Lumbago

From a design perspective of the Paging Toolbar, doesn't it make sense to keep the states of the data in the data store and the DB tables in sync via AJAX calls? This way, there is no confusion about which data is correct. – Besnard

You are right, The paging toolbar should listen to the store on change event and reflect the store current data. – Lumbago

Answer 6

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.

Selfidentity

I will give it a check and let you know – Lumbago

Answer 7

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

Chantellechanter

Answer 8

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();
}

Mckibben