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.create创建Ext JS对象的新实例，因为使用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，因为配置对象指定了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的Advanced REST clinet。只需通过发送带有手动定义参数的纯HTTP请求，确保您的服务在没有任何UI的情况下正常运行。只有当一切按预期工作时才移动到GUI部分。

对于GUI部分，我鼓励您在API Documentation内学习Ext JS的源代码，它结构合理，文档化，您将学到很多东西。

从版本4开始，Ext JS附带了一个MVC应用程序框架，它简化了大型RIA应用程序的创建。请阅读Application Architecure Guide。

Answer 2

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

PagingToolbar Extjs 4的问题

2 个答案: