CODEWITHSUNDEEP
gridviewextjspaginationextjs4store
incutonez
incutonez

Reputation: 3331

Ext JS 4: Updating a Grid's PagingToolbar

I'm trying to update a pagingtoolbar's information if its underlying store changes. Let's say I have the following code.

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);

Ext.onReady(function() {
  var data = [
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'}   
  ];

  Ext.define('model', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'name', type: 'string'},
      {name: 'phone', type: 'string'}
    ]
  });

  var store = Ext.create('Ext.data.Store', {
    model: 'model',
    proxy: {
      type: 'pagingmemory'
    },
    extraParams: {
      start: 0,
      limit: 1
    },
    //data: data,  // uncomment this
    pageSize: 7,
    remoteSort: false
  });

  Ext.define('mygrid', {
    extend: 'Ext.grid.Panel',
    store: store,  // initially just an empty store
    id: 'grid',
    dockedItems: [{
      xtype: 'pagingtoolbar',
      dock: 'bottom',
      store: store,
      displayInfo: true
    }],
    columnLines: true,
    height: 700,
    columns: [{
      header: 'Name',
      dataIndex: 'name',
      flex: 1,
      align: 'center'
    }, {
      header: 'Phone',
      dataIndex: 'phone',
      flex: 1,
      align: 'center'
    }]
  });

  Ext.create('Ext.Viewport', {
    layout: 'border',
    title: 'My viewport!',
    items: [{
      region: 'center',
      items: [Ext.create('mygrid')]
    }]
  });

  store.loadRawData(data);  // comment this out
  /*grid.addDocked({
    xtype: 'pagingtoolbar',
    store: store,
    displayInfo: true,
    dock: 'bottom',
    pageSize: 7
  });*/  // doesn't work
  //Ext.getCmp('grid').getDockedItems()[0].moveFirst();  // doesn't work
  //store.loadPage(1);  // doesn't work
});

When you run this code, the grid contains all of the data (no paging). However, if you comment/uncomment the lines that I tell you to, the grid contains the correct amount of data per page.

What I want to know is, how can I update the PagingToolbar to correctly page the data that I added to the store? I've tried using the moveFirst function on the PagingToolbar and the store.loadPage function, but that gives me a Firebug error of "result is undefined." I've also tried this SO answer, but that didn't seem to do anything... The last thing I tried was adding a PagingToolbar after the store had been populated with its data, but obviously no go.

Upvotes: 1

Views: 2729

Answers (1)

incutonez
incutonez

Reputation: 3331

This is my working solution (changes have comments above them).

Ext.Loader.setConfig({
  enabled: true
});

Ext.Loader.setPath('Ext.ux', 'examples/ux');
Ext.require(['Ext.ux.data.PagingMemoryProxy']);

Ext.onReady(function() {
  var data = [
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'},
    {name: 'john smith', phone: '4562135'},
    {name: 'blah blah', phone: '4445220'}   
  ];

  Ext.define('model', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'name', type: 'string'},
      {name: 'phone', type: 'string'}
    ]
  });

  // Excluding the proxy from the store
  var store = Ext.create('Ext.data.Store', {
    model: 'model',
    pageSize: 7,
    remoteSort: false
  });

  Ext.define('mygrid', {
    extend: 'Ext.grid.Panel',
    store: store,  // initially just an empty store
    id: 'grid',
    dockedItems: [{
      xtype: 'pagingtoolbar',
      dock: 'bottom',
      store: store,
      displayInfo: true
    }],
    columnLines: true,
    height: 700,
    columns: [{
      header: 'Name',
      dataIndex: 'name',
      flex: 1,
      align: 'center'
    }, {
      header: 'Phone',
      dataIndex: 'phone',
      flex: 1,
      align: 'center'
    }]
  });

  Ext.create('Ext.Viewport', {
    layout: 'border',
    title: 'My viewport!',
    items: [{
      region: 'center',
      items: [Ext.create('mygrid')]
    }]
  });

  // Manually setting the proxy and loading the store
  store.setProxy({
    type: 'pagingmemory',
    data: data
  });
  store.load();
});

I've exclued the proxy from the definition of the store, and when it comes time to loading the data in the store, I call the setProxy function, declare it as pagingmemory, and set the data. Then you have to load the store.

Not really sure why loadData/loadRawData doesn't work... I was trying to trace them in Firebug and only saw the data not being defined somewhere in the core Ext code, but if I had hardcoded the data in the store, it was defined (at the same line of code)... guess it could be a bug? Either way, this fix works for me.

Upvotes: 1

Related Questions