Java 使用DirectJEngine在ext js中无限滚动
首先,我要求你对我宽容一点:我只是一个蹩脚的ExtJS和javascript新手 我正在努力适应ExtJS中的需求。我在sencha ext js中定义了以下存储:Java 使用DirectJEngine在ext js中无限滚动,java,javascript,json,extjs,Java,Javascript,Json,Extjs,首先,我要求你对我宽容一点:我只是一个蹩脚的ExtJS和javascript新手 我正在努力适应ExtJS中的需求。我在sencha ext js中定义了以下存储: Ext.define('AM.store.M2MResources', { extend: 'Ext.data.Store', requires: 'Ext.direct.*', // use ext-direct for binding model: 'AM.model.M2MResource',
Ext.define('AM.store.M2MResources', {
extend: 'Ext.data.Store',
requires: 'Ext.direct.*', // use ext-direct for binding
model: 'AM.model.M2MResource',
autoLoad: true,
paramsAsHash:false,
autoSave: false,
pageSize: 25,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
type: 'direct',
api: {
// create : undefined,
read : M2MResourceServlet.getM2Mresources,
// update : undefined,
// destroy : undefined
},
extraParams: {
total: 100
},
root: 'data',
fields: [{name:'label'}, {name:'address_unique'}, {name:'address_network'}, {name:'status'}],
paramOrder: 'page, start, limit',
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'totalCount'
},
writer: new Ext.data.JsonWriter({
encode: false,
writeAllFields: true,
listful: true
}
)
}
});
与此DirectJEngine服务器对应:
public class M2MResourceServlet {
public static class ResourceData{
public String label;
public String address_unique;
public String address_network;
public String status;
}
public static class DirectStoreResult{
ResourceData[] data;
public int totalCount;
public boolean success = true;
public DirectStoreResult(ResourceData[] data, int totalCount) {
super();
this.data = data;
this.totalCount = totalCount;
}
}
static int counter = 0;
@DirectMethod
public DirectStoreResult getM2Mresources( Integer page, Integer start, Integer limit ) {
ArrayList<ResourceData> result = new ArrayList<ResourceData>();
// fill result list...
DirectStoreResult r = new DirectStoreResult(result.toArray(new ResourceData []{}),limit);
return r;
}
}
因此,我希望将数据加载到以下网格中:
Ext.define('AM.view.resgrid.M2MResources', {
extend: 'Ext.grid.Panel',
alias: 'widget.m2mresources',
title: 'All Resources Here',
verticalScrollerType: 'paginggridscroller',
store: 'M2MResources',
initComponent: function() {
console.log('initComponent function in View has been called...');
this.columns = [
{header: 'friendly name',dataIndex: 'label',flex: 1, sortable: true},
{header: 'address unique', dataIndex: 'address_unique',flex: 1},
{header: 'address network', dataIndex: 'address_network', flex: 1},
{header: 'node status',dataIndex: 'status',flex: 1}
];
this.callParent(arguments);
Ext.getStore('M2MResources').guaranteeRange(0, 100);
}
});
不幸的是,存储似乎从未加载数据:网格面板显示“加载…”符号,并且没有显示任何数据项。我怀疑问题出在我的直接方法返回的json中。客户端我得到以下json数据记录:
你能建议如何解决这个问题吗?谢谢大家! 响应数据与读卡器配置不匹配。您已经为reader配置了一个根:'data',但我在响应中看到,没有数据节点。显示的扩展节点是:root:'result.data'。我看不到属性successProperty和totalProperty。好的,可以找到这个问题的合理答案。基本上,服务器端直接方法必须是
@DirectMethod
public PartialResult<ResourceData> getM2Mresources(int start, int limit) {
ResourceData[] m2mResources = ...
//...
return new PartialResult<ResourceData>(Arrays.asList(m2mResources),
m2mResources.length);
}
显然,这正是我想做的。谢谢亚当·戴维斯!无论如何,如果有人能解释为什么必须使用
directFn
元素而不是api
。谢谢您的回答,我将不胜感激!我将两个root:'data'
修改为root:'result.data'
,但仍然没有任何内容。。。我还检查了两个successProperty和totalProperty:它们位于列表的末尾,在数据节点之后,如下所示:result:data:[…]success:true totalCount:100
但是您的数据嵌套在一个更大的数据结构中!应该选哪一个?记录[0],记录[1],..,记录[n]?当你想要的只是这些条目中的一个时,为什么你要返回这么大的结果集呢?返回您需要的内容并修复您的阅读器,仅此而已。
@DirectMethod
public PartialResult<ResourceData> getM2Mresources(int start, int limit) {
ResourceData[] m2mResources = ...
//...
return new PartialResult<ResourceData>(Arrays.asList(m2mResources),
m2mResources.length);
}
public class PartialResult<T> {
/** the partial result set */
private Collection<T> result;
/** the size of the complete result set */
private int total;
public Collection<T> getResult() {
return this.result;
}
public int getTotal() {
return this.total;
}
public void setResult(Collection<T> result) {
this.result = result;
}
public void setTotal(int total) {
this.total = total;
}
public PartialResult(Collection<T> result, int total) {
super();
this.result = result;
this.total = total;
}
Ext.define('AM.store.M2MResources', {
extend: 'Ext.data.DirectStore',
requires: 'Ext.direct.*', // use ext-direct for binding
model: 'AM.model.M2MResource',
autoLoad: true,
buffered: true,
pageSize: 20,
purgePageCount: 0,
leadingBufferZone: 60,
trailingBufferZone: 0,
constructor : function(config) {
config = config || {};
config.proxy = {
type: 'direct',
directFn : M2MResourceServlet.getM2Mresources,
reader: {
type: 'json',
root: 'result'
},
paramOrder: 'start,limit',
paramsAsHash: false
};
this.callParent([config]);
},
toString: function() {
return 'M2MResources: count = ' + this.getCount() + ', totalCount = '
+ this.getTotalCount();
}
});