ExtJS 5 - Панель инструментов пейджинга для сетки, не работающей с прокси памяти

Question

Я загружаю встроенные данные в свой магазин с прокси-сервером памяти и включаю подкачку, но проблема в том, что на панели инструментов пейджинга отображается только первая страница данных. Кнопка со стрелкой «Далее» также не обновляет сетку. У меня есть ссылки на изображения внизу, чтобы показать, как выглядит панель сетки.

Это мой магазин:

Ext.define('PagingBug.store.MyGrid', { 
    extend: 'Ext.data.Store', 
    alias: 'store.mygrid', 

    data: [ 
     [ 'Data1', 'Something1' ], 
     [ 'Data2', 'Something2' ], 
     [ 'Data3', 'Something3' ], 
     [ 'Data4', 'Something4' ], 
     [ 'Data5', 'Something5' ], 
     [ 'Data6', 'Something6' ], 
     [ 'Data7', 'Something7' ], 
     [ 'Data8', 'Something8' ] 
    ], 

    fields: [ 
     {name: 'field1'}, 
     {name: 'field2'} 
    ], 

    pageSize: 5, 

    proxy: { 
     type: 'memory', 
     enablePaging: true, 
     reader: { 
      type: 'array' 
     } 
    } 
}); 

Это мое мнение:

Ext.define('PagingBug.view.main.Main', { 
    extend: 'Ext.container.Container', 
    requires: [ 
     'PagingBug.store.MyGrid' 
    ], 

    xtype: 'app-main', 

    items: [{ 
     xtype: 'gridpanel', 
     store: { 
      type: 'mygrid' 
     }, 
     columns: [ 
       {text: 'Field 1', dataIndex: 'field1'}, 
       {text: 'Field 2', dataIndex: 'field2'} 
     ], 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      store: { 
       type: 'mygrid' 
      }, 
      dock: 'bottom', 
      displayInfo: true 
     }], 
    }] 
}); 

Изображения панели сетки:

http://i.stack.imgur.com/PCqSC.png

http://i.stack.imgur.com/S8CXU.png

Может ли кто-нибудь указать, что я делаю неправильно? Благодарю.

Answer 1

Это на самом деле очень тонкая ошибка с вашей стороны; В вашем Main классе вы определяете конфигурацию магазина в type: 'mygrid' на вашем gridpanel, вы затем определяя конфигурацию магазина во второй раз на pagingtoolbar - это создает два отдельных экземпляров магазина, а затем запутанным компонент на панели инструментов.

Вы все еще можете решить эту проблему декларативно, хотя, определяя свой магазин в viewModel и связывании ссылку на же магазина на двух компонентах, например:

Ext.define('PagingBug.view.main.Main', { 
    extend: 'Ext.container.Container', 
    requires: [ 
     'PagingBug.store.MyGrid' 
    ], 

    viewModel: { 
     stores: { 
      myGridStore: { 
       type: 'mygrid' 
      } 
     } 
    }, 

    xtype: 'app-main', 

    items: [{ 
     xtype: 'gridpanel', 
     bind: '{myGridStore}', 
     columns: [ 
      {text: 'Field 1', dataIndex: 'field1'}, 
      {text: 'Field 2', dataIndex: 'field2'} 
     ], 
     dockedItems: [{ 
      xtype: 'pagingtoolbar', 
      bind: '{myGridStore}', 
      dock: 'bottom', 
      displayInfo: true 
     }], 
    }] 
}); 

» Fiddle

Answer 2

Я принял ваш код и немного упростил его для создания fiddle. Моя скрипка работает и показывает правильную разбивку на страницы с помощью ExtJs 5.0.1, но в настоящее время не работает с ExtJs 5.1. Это может быть ошибкой, которая нуждается в отчетах, я опубликовал на форуме Sencha Bugs для дальнейшего изучения тем временем.

В случае скрипки ссылки когда-либо ломается, вот код, который используется:

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     var pagingStore = Ext.create('Ext.data.Store', { 

      data: [ 
       ['Data1', 'Something1'], 
       ['Data2', 'Something2'], 
       ['Data3', 'Something3'], 
       ['Data4', 'Something4'], 
       ['Data5', 'Something5'], 
       ['Data6', 'Something6'], 
       ['Data7', 'Something7'], 
       ['Data8', 'Something8'] 
      ], 

      fields: [{ 
       name: 'field1' 
      }, { 
       name: 'field2' 
      }], 

      pageSize: 5, 

      proxy: { 
       type: 'memory', 
       enablePaging: true, 
       reader: { 
        type: 'array' 
       } 
      } 
     }); 

     Ext.define('MainView', { 
      extend: 'Ext.container.Container', 

      items: [{ 
       xtype: 'gridpanel', 
       store: pagingStore, 
       columns: [{ 
        text: 'Field 1', 
        dataIndex: 'field1' 
       }, { 
        text: 'Field 2', 
        dataIndex: 'field2' 
       }], 
       dockedItems: [{ 
        xtype: 'pagingtoolbar', 
        store: pagingStore, 
        dock: 'bottom', 
        displayInfo: true 
       }], 
      }] 
     }); 

     Ext.create("MainView", { 
      renderTo: Ext.getBody() 
     }); 
    } 
}); 

После того, как я получаю ответ от Форумов Сенча Я обновит ответ. Тем временем вам может потребоваться посмотреть на работу или использовать рабочую версию.