How to override the pagingtoolbar?

1
votes

I would like to know how to override the displaymsg and page number of the paging toolbar.

I'm trying to get the paging toolbar working with the infinite scrolling. I've got the components working so that when the user moves the infinite vertical scroller I work out what page we're on using javascript and I want to update the paging toolbar with this number. Similarly I work out in what range of records the user is on and want to update the displaymsg with this range.

I could modify the the html to directly change the displaymsg but I would prefer to change these {0}, {1}, {2} variables:

"Displaying {0}-{1} of {2} Item(s)"

Is there some kind of store I can access to change these?

I don't know if the page number is in a store, if it's not I could simply edit the html directly to change that without having to worry about conflicts.

Any idea or tips how I can accomplish this? Thank you.

2
extjsextjs4

2 Answers

0
votes

Look at sources..

There is a method

// private
    updateInfo : function(){
        var me = this,
            displayItem = me.child('#displayItem'),
            store = me.store,
            pageData = me.getPageData(),
            count, msg;

        if (displayItem) {
            count = store.getCount();
            if (count === 0) {
                msg = me.emptyMsg;
            } else {
                msg = Ext.String.format(
                    me.displayMsg,
                    pageData.fromRecord,
                    pageData.toRecord,
                    pageData.total
                );
            }
            displayItem.setText(msg);
            me.doComponentLayout();
        }
    },

Probably you can develop a public interface for something like this.

Cheers. :)

1
votes

Thanks altrange. This changes the displaymsg, any idea how to change the page number in the text box?

You can generate it by yourself.

So... create some public methods - 

refreshDisplayMsg(from, to, total) {
    var me = this, 
    displayItem = me.child('#displayItem'),
    msg = Ext.String.format(
                    me.displayMsg,
                    from
                    to,
                    total
    );
    displayItem.setText(msg);
    me.doComponentLayout();
}

Moreover this method will be invoked by store onload hanlder.