On toggle of button implement Paging and remove paging EXTJS

Question

I want to implement paging i.e. onclick(toggling) of button, grid should load entire data in single page and onclick(toggling) of button implement paging(i.e pagesize of 25). How can we achieve this functionality ?? Thanks in advance

Here is the code which is not working. Is there any changes to be implemented ?? This is Store:

var Store = Ext.create('Ext.data.Store', {
  remoteSort : true,
  autoSave: false,  
  fields: data,
  pageSize: 20,
  remoteFilter:true,
  sortInfo:{field: 'ORDER_ID', direction: "DESC"},
  proxy: {
    type: 'ajax',
    url : url,
    reader: {
      type: 'json',
      rootProperty: 'data',
      totalProperty: 'total'
    }
  },
  listeners: {
    load : function(store, records, options) {
      //index = options.params.start; // need to work here to get  index
       if (store.getCount() == 0) {

        Ext.Msg.alert("No View Sales History Data Loaded", "please clear current filter(s)"); // <-- show load-feedback for suceess conditions
      } else {

          Ext.Msg.alert("View Sales History Data Loaded", "" + store.getCount() + " of " + store.getTotalCount() + " record(s)"); 
      }

      if (pagingtoolBar.pageSize != maxPageSize) {
        Ext.getCmp('pageSizeMaxButton').show();
        Ext.getCmp('pageSizeMinButton').hide();
      }

      if (window.top && window.top.footer) window.top.footer.ResetTimer();
    },
    exception : function(proxy, type, action, options, res) {
    progressWindow.hide();
    }
  }
}

Here is the Paging Toolbar:

 {
    text: 'Multi Page', //toggle button in toolbar 
    tooltip: 'Switch to single-page view',
    iconCls: 'silk-pageSize',
    id: 'pageSizeMaxButton',
    hidden: false,
    handler: function () {
            if (viewSalesHistoryWindow != undefined) viewSalesHistoryWindow.close();


        pagingtoolbar.pageSize = maxPageSize; 

        Ext.getCmp('pageSizeMinButton').show();
        this.hide();

        //pagingtoolbar.changePage(1);
        //pagingtoolbar.change; // changePAge is not available in Extjs6
        //filters.local = true;
        vshStore.remoteSort = false;
    },
    {
    text: 'Single Page',// toggle button in toolbar
      tooltip: 'Switch to multi-page view',
      iconCls: 'silk-pageSize',
      id: 'pageSizeMinButton',
      hidden: true,
      handler: function () {
        if (viewSalesHistoryWindow != undefined) viewSalesHistoryWindow.close();

        // set page size
        pagingtoolbar.pageSize = originalPageSize;
        // toggle buttons
        Ext.getCmp('pageSizeMaxButton').show();
        this.hide();

        // switch to page 1
        //pagingtoolbar.changePage(1);
        //pagingtoolbar.change; // changePAge is not available in Extjs6
        //filters.local = false;
        vshStore.remoteSort = true;
      }
    }

Alexander Alexander · Accepted Answer · 2016-06-04T10:05:14

Entirely removing the paging from an existing is not supported, I am afraid. That said, you can just set a high pageSize:

store.setPageSize(Number.MAX_VALUE);

as per the docs.

On toggle of button implement Paging and remove paging EXTJS

1 Answers