设置页面大小Sencha touch

时间:2015-03-24 18:42:42

标签: extjs sencha-touch sencha-touch-2

我一直在尝试设置页面大小,以便我的应用程序运行得更快。我正在读取一个巨大的xml文件(数千行),我想使用ListPaging插件只加载一个页面'一次。

这是我的清单:

                                            xtype : 'list',          
                                            plugins: {
                                                xclass: 'Ext.plugin.ListPaging',
                                                autoPaging: true,
                                                loadMoreText : 'Loading more...',
                                                noMoreRecordsText : 'loaded'
                                            },
                                            store : 'mainStore',
                                            height : '100%',
                                            layout : 'fit',
                                            id: 'myList',
                                            flex : 5,
                                            itemTpl : "foo"

这是我的商店:

config: {
model : 'myApp.model.foo',
storeId: 'mainStore',
autoLoad: true,
//currentPage: 1,
//buffered: true,
pageSize: 15,

proxy : {
    type : "ajax",
    url : 'resources/images/data/fooBar.xml',
    startParam: 'offset',
    reader : {
        type : "xml",
        rootProperty : 'foo',
        record : 'bar'
    }
}

}

然而,当我运行这个时,我得到的只是“加载更多...'整个列表底部的文本(不是15个项目),然后它只再次加载相同的xml数据,但这次只是将它连接到整个'列表的末尾。

如何设置页面大小,以便每个页面显示15个左右的项目,然后滚动到列表的底部(这15个项目的长度) )我将接下来的15个项目连接到最后15个项目,共显示30个项目......等等。

使用Sencha Touch 2.4.1

更新 这是配置:

config: {
model : 'c17App.model.approaches',
storeId: 'mainStore',
autoLoad: true,
pageSize: 15,

proxy : {
    type : "ajax",
    url : 'resources/images/data/approach_all.xml',
    total:  17,
    start: 1,
    limit: 15,
    reader : {
        type : "xml",
        rootProperty : 'approaches',
        record : 'approach',
        totalProperty: 'total'//maybe needs to be a number?
    }
}

}

1 个答案:

答案 0 :(得分:1)

根据您提供的方案,您的网络服务似乎不符合Sencha的ListPaging插件。 您pageSize store正确使用config

config: {
    pageSize: 15,
    ......
}

您的API响应应具有以下属性以支持ListPaging

  1. total:此字段/属性将随您的API一起提供。使用此值,插件将决定应用程序是否已到达列表的末尾。

  2. start:这是由Headers中的插件发送的,远程代理将知道将从哪个索引位置启动数据提取。

  3. limit:这只是您的pageSize。它也是由Headers中的插件发送的,远程代理将知道它应该从start索引中获取多少数据数据。

  4. 请检查您的api回复是否包含totalstartlimit参数。如果它在那里,只需在您的代理中添加此阅读器:

    reader: {
        type: 'xml', // 'json' if the api is giving response in json format
        rootProperty: 'xyz', // Depends on your api response.
        totalProperty: 'total'
    }
    

    你的问题将得到解决。 随意请求任何其他澄清。

    --------------------------------------的修改 - ----------------------------------------------

    ' total',' start'和' limit'应该在api响应中支持listpaging。您不必在代理中明确发送它(正如您在编辑部分中发送的那样)