PagingToolbar Extjs 4的问题

Question

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
        }]
    });
}

Answer 1

必须使用Ext.create创建Ext对象的新实例，因为使用new关键字实例化的对象不会处理Ext JS class system。

当您查看load()方法的源代码时，您将看到配置选项是如何应用的，您也会看到：

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

由于存储已经配置了pageSize，因此不需要limit选项，因为它将pageSize作为默认设置。

   store.load({
       start: 0
   });

我还建议看看loadPage()方法，它可以正确地设置所有与分页相关的参数：

   store.loadPage(1);

另一个增强是将autoLoad设置为true，这样您就可以完全忽略存储加载。

也不需要手动创建Ext.data.HttpProxy，因为configuration对象指定了ajax类型，并将负责为您实例化正确的代理类型。

由于您指定了JSON读取器，因此应该不需要设置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或者Chrome的Advanced REST clinet。确保您的服务在没有任何UI的情况下运行正常，只需发送带有手动定义参数的普通HTTP请求即可。只有当一切都按预期运行时，才会移动到GUI部分。

对于图形用户界面部分，我鼓励您研究API Documentation中Ext的源代码，它具有良好的结构和文档，您将学到很多东西。

从版本4开始，Ext就提供了MVC应用程序框架，这大大简化了大型RIA应用程序的创建。在Application Architecure Guide上阅读更多内容。

Answer 2

分页工具栏默认支持远程分页。如果需要本地分页，则在“datachange”和“refresh”事件上触发重新加载存储。