EXTJS4 - разбиение на страницы не является правильным в сетке

Я установил размер страницы в store и totalproperty в настройках прокси-сервера, а также определил конфигурацию dockedItems. Но на странице отображаются все записи, а не указанные страницы. Вот мой код:

Файл js:

var sm = Ext.create('Ext.selection.CheckboxModel'); 
    Ext.define('SuperUser', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'fname', type: 'string' },
            { name: 'lname', type: 'string' },
            { name: 'email', type: 'string' },
            { name: 'uid', type: 'string' },
            { name: 'isSup', type: 'boolean' },
            { name: 'upDate', type: 'string' },
            { name: 'upBy', type: 'string' }
        ]
    });
  //Create the grid
    var superGrid=Ext.define('supusergrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.supusergrid',
    title: 'Super Admin Grid',
    gridId:'grid',
    model:'SuperUser',
    store: Ext.create('Ext.data.Store', {
        storeId: 'supUserStore',
         pageSize: 3,
        model:'SuperUser',
        autoLoad: true,
            proxy: { 
                type: 'ajax',
                url : 'supUserStore.json',
                reader: {
                    type: 'json',
                    root: 'data',
                    totalProperty:'total' 
                    } 
                }
    }),
    selModel: sm,
    columns: [
              { 
                  header: 'First Name',
                  dataIndex: 'fname' 
            },
              {
                header: 'Last Name', 
                dataIndex: 'lname' 
                },
              { 
                    header: 'Email', 
                    dataIndex: 'email'
                    },
              { 
                        header: 'User ID', 
                        dataIndex: 'uid' 
                        },

             {
                 header: 'Super Admin', 
                 dataIndex: 'isSup'
                 },
              { 
                     header: 'Updated Date',
                     dataIndex: 'upDate',

                     },
              { 
                         header: 'Updated By',
                         dataIndex: 'upBy'
                         }
          ],
          dockedItems: [{
              xtype: 'pagingtoolbar',
              store: Ext.data.StoreManager.lookup('supUserStore'),   
              dock: 'bottom',
              displayInfo: true
          }],
    initComponent: function() {
        this.callParent(arguments);

    }
});
    Ext.onReady(function() {
        Ext.widget('supusergrid', {

            renderTo: 'div1'
        });
    });

Файл json:

{
    "success": true,
    "total": 12,
    "data":  [
                { "fname": "Jane","lname":"Smith","email": "[email protected]", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"[email protected]" },
                { "fname": "Jim","lname":"Smith","email": "[email protected]", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"[email protected]" },
                { "fname": "Jane","lname":"Smith","email": "[email protected]", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"[email protected]" },
                { "fname": "Jim","lname":"Smith","email": "[email protected]", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"[email protected]" },
                { "fname": "Jane","lname":"Smith","email": "[email protected]", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"[email protected]" },
                { "fname": "Jim","lname":"Smith","email": "[email protected]", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"[email protected]" },
                { "fname": "Jane","lname":"Smith","email": "[email protected]", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"[email protected]" },
                { "fname": "Jim","lname":"Smith","email": "[email protected]", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"[email protected]" },
                { "fname": "Jane","lname":"Smith","email": "[email protected]", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"[email protected]" },
                { "fname": "Jim","lname":"Smith","email": "[email protected]", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"[email protected]"}
            ] 
}

пожалуйста, предложите, где я ошибаюсь.

1
добавлено отредактировано
Просмотры: 1
Попробуйте создать свой магазин перед сеткой. Я предполагаю, что поиск завершился неудачно, потому что он еще не создан.
добавлено автор asgoth, источник
Попробуйте добавить в initComponent: supUserStore.loadPage (1);
добавлено автор asgoth, источник
Можете ли вы создать jsFiddle для этого кода?
добавлено автор asgoth, источник
Привет, агот, спасибо за ответ! хорошо, если я создаю хранилище перед сеткой, как описано ниже, проблема не решена. Часть кода выглядит следующим образом: var supUserStore = Ext.create ('Ext.data.Store', {storeId: 'supUserStore', pageSize: 3, модель: «SuperUser», autoLoad: true,});//Создаем сетку var superGrid = Ext.define ('supusergrid', {extend: 'Ext.grid.Panel', псевдоним: 'widget.supusergrid', заголовок: 'Super Admin Grid', gridId: 'grid', model : «SuperUser», store: Ext.data.StoreManager.lookup ('supUserStore'), selModel: sm,
добавлено автор Anushree Acharjee, источник
все такой же:(
добавлено автор Anushree Acharjee, источник
вот путь: jsfiddle.net/ctvkY , кроме того, что используется выше JSON-файл.
добавлено автор Anushree Acharjee, источник

2 ответы

0
добавлено
Здесь я не использую код на стороне сервера. Жесткое кодирование JSON-файла.
добавлено автор Anushree Acharjee, источник

Хранить пейджинг не так умно, как вы думаете, это так. Просто потому, что вы говорите, что размер страницы составляет 3 записи и что у вас есть 12 полных записей, это не значит, что вы разбиваете все на 4 приятные страницы для вас.

При вызове store.loadPage в хранилище добавляются параметры start и limit для прокси-запроса. Когда ответ возвращается, он предполагает, что вы правильно ограничили набор результатов и загружали все предоставленные записи. Вы несете ответственность за использование этих параметров для ограничения результатов, возвращаемых в магазин. Обычно это потребует публикации данных на сервере, чтобы вы могли использовать эти параметры.

Thankfully, there's a UX component that should help you out: Ext.ux.data.PagingMemoryProxy

And here's some sample code showing how it works: Sliding Pager example

0
добавлено