【问题标题】:Set page size Sencha touch设置页面大小煎茶触摸
【发布时间】:2015-03-27 01:13:52
【问题描述】:

我一直在尝试设置页面大小,以便我的应用运行得更快。我正在读取一个巨大的 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?
    }
}

}

【问题讨论】:

  • 你能提供完整的例子吗?您可以使用 fiddle.sencha.com

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


【解决方案1】:

从您提供的场景来看,您的网络服务似乎不符合 Sencha 的ListPaging 插件。 pageSizestore config 中被您正确使用。

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

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

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

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

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

因此请检查您的 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 响应中以支持列表分页。您不必在您的代理中明确发送它(正如您在编辑部分中发送的那样)

【讨论】:

  • 我刚刚在我的配置中添加了您建议的更改,仍然给我同样的东西,它只将相同的 xml 连接到末尾。请看我的编辑^
  • 开始、限制和总计(或任何指示项目总数的字段)是否会出现在您的 api 响应中?请查看编辑后的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-12-25
  • 2012-11-04
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多