проблема с PagingToolbar Extjs 4 - PullRequest
Новая
       24

проблема с PagingToolbar Extjs 4

1 голос
/ 21 июня 2011

Я использую ExtJS v4 для создания некоторых богатых интерфейсов, проблема в том, что я время от времени сталкиваюсь с трудностями (что-то вполне нормальное для новичка в Extjs: p), проблема, с которой я сталкиваюсь сейчас, касается разбиения на страницы, вФакт, что на моей странице есть все записи, которые отображаются, даже после указания элемента по nbr страниц, если это возможно, чтобы помочь мне спасибо 

Ext.onReady(onReady);

function onReady() {
    var itemsPerPage = 10;
    var store = new Ext.data.JsonStore({
        autoLoad: false,
        pageSize: itemsPerPage,
        proxy: new Ext.data.HttpProxy({
            type: 'ajax',
            url: '../Service.asmx/GetMyDvpt',
            reader: {
                type: 'json',
                root: 'd',
                //totalProperty: 'total',
                idProperty: 'Id'
            },
            headers: {
                'Content-type': 'application/json'
            }
        }),
        fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
   });

   store.load({
        params: {
            start: 0,
            limit: itemsPerPage
       }
   });

   Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            { dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
            { dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
            { dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
            { dataIndex: 'SURF_PG', header: 'SURF_PG' },
            { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
        ],
        renderTo: 'panel',
        title: 'Dvpt Grid',
        width: 570,
        height: 350,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }]
    });
}

Ответы [ 2 ]

7 голосов
/ 22 июня 2011

Необходимо создать новые экземпляры объектов Ext JS с помощью Ext.create, поскольку объекты, созданные с помощью ключевого слова new, не будут заботиться о системе классов Ext JS .

Когда вы посмотрите на исходный код метода load () , вы увидите, как применяются параметры конфигурации, а также: 

   store.load({
       start: 0,
       limit: itemsPerPage
   });

Поскольку хранилище уже настроенос pageSize опции limit не нужны, поскольку он получает pageSize по умолчанию. 

   store.load({
       start: 0
   });

Я бы также рекомендовал взглянуть на loadPage () метод, который обрабатывает правильную настройку всех соответствующих параметров подкачки: 

   store.loadPage(1);

Еще одно усовершенствование - установить autoLoad в значение true, тогда вы можете полностью опустить загрузку хранилища.

Также нет необходимости создавать Ext.data.HttpProxy вручную, поскольку объект конфигурации указывает тип ajax и позаботится о создании правильного типа прокси для вас.

Поскольку вы указали JSON reader, не нужно устанавливать заголовок HTTP accept.Content-Type в любом случае является заголовком ответа, а соответствующий заголовок запроса будет Accept.

Поэтому ваш код должен выглядеть следующим образом: 

Ext.onReady(onReady);

function onReady() {
    var store = Ext.create('Ext.data.JsonStore', {
        autoLoad: true,
        pageSize: 10,
        proxy: {
            type: 'ajax',
            url: '../Service.asmx/GetMyDvpt',
            reader: {
                type: 'json',
                root: 'd',
                totalProperty: 'total',
                idProperty: 'Id'
            }
        },
        fields: ['NOM_EXP', 'NOM_ESP', 'NOM_VAR', 'SURF_PG', 'DD_CYCLE_PROD']
   });

   Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            { dataIndex: 'NOM_EXP', header: 'NOM_EXP' },
            { dataIndex: 'NOM_ESP', header: 'NOM_ESP' },
            { dataIndex: 'NOM_VAR', header: 'NOM_VAR' },
            { dataIndex: 'SURF_PG', header: 'SURF_PG' },
            { dataIndex: 'DD_CYCLE_PROD', header: 'DD_CYCLE_PROD', flex: 1 }
        ],
        renderTo: 'panel',
        title: 'Dvpt Grid',
        width: 570,
        height: 350,
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true
        }]
    });
}

При решении подобных проблем яобычно тестируют бэкэнд-сервис с клиентом REST.Доступно множество дополнений для разных браузеров, например RESTClient для Firefox или Advanced REST clinet для Chrome.Убедитесь, что ваша служба работает правильно без какого-либо пользовательского интерфейса, просто отправив простой HTTP-запрос с заданными вручную параметрами.Переходите к части с графическим интерфейсом только тогда, когда все работает как положено.

Для части с графическим интерфейсом я призываю вас изучить исходный код Ext JS в документации API , она хорошо структурирована и задокументированаи вы многому научитесь.

Начиная с версии 4 Ext JS поставляется с инфраструктурой приложений MVC, которая значительно упрощает создание больших приложений RIA.Подробнее читайте в Руководстве по архитектуре приложений .

0 голосов
/ 30 мая 2012

Панель инструментов подкачки поддерживает удаленную подкачку по умолчанию.Если локальный пейджинг требуется для пейджинга, перезагрузите хранилище по событию datachange и сработало событие refresh

...