[英]NoMoreRecordText property is not working with the List-Paging plugin on Sencha Touch 2
[英]Sencha touch list paging
我需要使用REST Web服务为我的应用程序实现列表页面调度。
这是我的代码
list.js
Ext.define('bluebutton.view.BlueButton.TestingList', {
extend: 'Ext.List',
xtype: 'testinglistcard',
requires: [
'Ext.field.Select',
'Ext.field.Search',
'bluebutton.view.BlueButton.MemberDetail',
'Ext.plugin.ListPaging',
'Ext.plugin.PullRefresh',
'Ext.dataview.Override'
],
config: {
styleHtmlContent: true,
scrollable: 'vertical',
indexBar: true,
singleSelect: true,
onItemDisclosure: true,
grouped: true,
variableHeights : false,
store : { xclass : 'bluebutton.store.BlueButton.Testing'},
itemHeight :100,
id :'testinglist',
emptyText: '<p class="no-search-results">No member record found matching that search</p>',
itemTpl: Ext.create(
'Ext.XTemplate',
'<div class="tweet-wrapper">',
'<table>',
'<tr>',
'<td>',
' <div class="tweet">',
' <h3>{invoiceId}</h3>',
' <h3>Name: {billNumber}</h3>',
' <h3>Point Avalaible : {invoiceDate} , Last Visited : {invoiceAmount}</h3>',
' </div>',
'</td>',
'</tr>',
'</table>',
'</div>'
),
},
});
store.js
Ext.define('bluebutton.store.BlueButton.Testing', {
extend: "Ext.data.Store",
requires: ['bluebutton.model.BlueButton.Testing'],
config: {
grouper: {
groupFn: function (record) {
return record.get('invoiceId')[0];
}
},
model :'bluebutton.model.BlueButton.Testing',
storeId :'testingstore',
autoLoad: true,
pageSize: 5,
clearOnPageLoad: false,
}
});
model.js
Ext.define('bluebutton.model.BlueButton.Testing', {
extend: 'Ext.data.Model',
config: {
idProperty: 'testingModel',
fields: [
{ name :'invoiceId'},
{ name: 'billNumber' },
{ name: 'invoiceDate' },
{ name: 'invoiceAmount' },
{ name :'downloadLink'},
],
proxy: {
type: 'rest',
url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/invoicejsonPost',
reader: 'json',
actionMethods: {
create: 'POST',
read: 'POST',
update: 'PUT',
destroy: 'DELETE'
},
noCache: false, // get rid of the '_dc' url parameter
// extraParams: {
// userid: "test",
// // add as many as you need
// },
reader: {
type: 'json',
rootProperty: 'invoice'
},
writer: {
type: 'json',
},
}
}
});
JsonService.java
@GET
@Path("invoicejson/")
@Produces({ MediaType.APPLICATION_JSON })
public Response getInvoicesForCustomerJson(
@PathParam(value = "accountId") String accountId) {
InvoiceListDto invoices = generateMockData();
return Response.ok(invoices).build();
}
private InvoiceListDto generateMockData() {
List<InvoiceDto> invoices = new ArrayList<InvoiceDto>();
invoices.add(new InvoiceDto(1, "37897-001", new Date(), 58.92));
invoices.add(new InvoiceDto(2, "37897-002", new Date(), 293.63));
invoices.add(new InvoiceDto(3, "37897-003", new Date(), 173.3));
invoices.add(new InvoiceDto(4, "37897-004", new Date(), 130.71));
invoices.add(new InvoiceDto(5, "37897-005", new Date(), 270.71));
invoices.add(new InvoiceDto(6, "37897-006", new Date(), 370.71));
invoices.add(new InvoiceDto(7, "37897-007", new Date(), 570.71));
invoices.add(new InvoiceDto(8, "37897-008", new Date(), 670.71));
invoices.add(new InvoiceDto(9, "37897-009", new Date(), 770.71));
invoices.add(new InvoiceDto(10, "37897-010", new Date(), 970.71));
invoices.add(new InvoiceDto(11, "37897-011", new Date(), 3370.71));
invoices.add(new InvoiceDto(12, "37897-012", new Date(), 1220.71));
invoices.add(new InvoiceDto(13, "37897-013", new Date(), 1230.71));
invoices.add(new InvoiceDto(14, "37897-014", new Date(), 140.71));
invoices.add(new InvoiceDto(15, "37897-015", new Date(), 150.71));
invoices.add(new InvoiceDto(16, "37897-016", new Date(), 160.71));
invoices.add(new InvoiceDto(17, "37897-017", new Date(), 170.71));
return new InvoiceListDto(invoices);
}
我们如何实现sencha的分页? 我应该在Java或sencha端实现分页功能?
首先,如果要实现分页,则无法在Java和Sencha之间进行选择,而必须同时进行两者工作才能使其正常工作。 服务应该能够接受参数,例如开始,页面,大小等,并且您的商店/代理应该向服务发送正确的参数以获取正确的数据页面。
sencha提供了一个List Paging插件 ,您应该使用它,因为它很容易工作。 除此之外,您还可以查看此列表或任何其他列表。分页教程: http ://www.mysamplecode.com/2012/05/sencha-touch-list-load-more.html
如果您不想使用插件并实现自己的方式,那么只需将列表标记为可滚动和滚动即可,这很容易,您只需检查位置即可,如果位置接近末尾,则只需加载商店并使用它记录以创建要推入列表的新项目。 每当滚动结束时,我都会使用此函数来填充数据:
onScrollEndOfList: function(scroller, x, y, store) {
var pctScrolled = (x/scroller.maxPosition.x)*100;
var remainingWidth = (scroller.maxPosition.x -x);
if(!store.config.isFullyLoaded && remainingWidth < 1000/*pctScrolled > 70 && FETCH_DATA */){
console.log("Already scrolled "+pctScrolled+", time to load more data. Width remaining="+remainingWidth);
if(Utils.storeFullyLoaded(store)){
console.log("Store is now fully loaded with "+(store.currentPage * store.getPageSize()));
store.config.isFullyLoaded = true;
return false;
} else {
store.nextPage({ addRecords: true });
console.log("loading next page");
return true;
}
return false;
}
},
这是代码,找出我们是否已经到达终点:
storeFullyLoaded: function(store) {
var total = store.getTotalCount();
return total !== null ? store.getTotalCount() <= (store.currentPage * store.getPageSize()) : false;
},
为了使getTotalCount
起作用,您需要在商店的代理上具有totalProperty
配置,如下所示:
reader: {
type: 'json',
rootProperty: 'myResponse.data',
totalProperty: 'myResponse.status.totalCount' // where to look for total?
}
PS :它也有一些自定义代码,这就是为什么您应该尝试理解眼底而不是按原样使用此代码的原因
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.