PagingToolbar Extjs 4的问题

Question

我正在使用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
        }]
    });
}

Answer 1

您必须创建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阅读器,因此不需要设置HTTP接受标头.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客户端测试后端服务.有许多可用于不同浏览器的插件,例如用于Firefox的RESTClient或用于Chrome的高级REST clinet.只需通过发送带有手动定义参数的纯HTTP请求,确保您的服务在没有任何UI的情况下正常运行.只有当一切按预期工作时才移动到GUI部分.

对于GUI部分,我鼓励您在API文档中学习Ext JS的源代码,它结构良好且文档化,您将学到很多东西.

从版本4开始,Ext JS附带了一个MVC应用程序框架,它简化了大型RIA应用程序的创建.阅读Application Architecure Guide中的更多内容.