extjs4 store加载一次后台数据,然后前台分页
store
store中主要涉及内容:
Ext.define("com.cxq.base.studentManage.student.store.Student", {
extend: "Ext.data.Store",
model:"com.cxq.base.studentManage.student.model.Student",
pageSize: 2, // 指定每页显示2条记录
autoLoad: true,
data: null, //数据由发请求后返回数据再赋值,具体看下面controller
proxy: {
type: 'mypagingmemory', //引用的PagingMemoryProxy类
reader: {
type: 'json',
totalProperty:'total'
}
}
});
controller
controller中主要内容
这里向后台发了一个ajax请求,返回数据放置store中:
Ext.Ajax.request({
url : _ctx_ + "/studentSystem/student/list.action",
params : param,
method : "POST",
success : function(res, opts) {
var res = Ext.decode(res.responseText);
if (res.success) {
var locateData = res.data;//返回的数据
var store = me.getStore("Student");
store.getProxy().data = locateData;
store.loadPage(1);
} else {
commonQuickMsg.msg("加载数据失败!", data.msg);
}
}
});
面板中分页和平时一样:
bbar : {
xtype : “pagingtoolbar”,
displayInfo : true,
store : “Student”
-----------------------------------------------------
注意:
我使用extjs4中源码的PagingMemoryProxy类时,报了一个错,断点跟踪后发现源码有几处没有判断是否为空。(filters 和sorters)
我修改后代码:
/**
* Paging Memory Proxy, allows to use paging grid with in memory dataset
*/
Ext.define('Ext.ux.data.MyPagingMemoryProxy', {
extend: 'Ext.data.proxy.Memory',
alias: 'proxy.mypagingmemory',
alternateClassName: 'Ext.data.MyPagingMemoryProxy',
constructor: function() {
Ext.log.warn('Ext.ux.data.MyPagingMemoryProxy functionality has been merged into Ext.data.proxy.Memory by using the enablePaging flag.');
this.callParent(arguments);
},
read : function(operation, callback, scope){
debugger;
var reader = this.getReader(),
result = reader.read(this.data),
sorters, filters, sorterFn, records;
scope = scope || this;
// filtering
filters = operation.filters;
if ( filters && filters.length > 0) {
//at this point we have an array of Ext.util.Filter objects to filter with,
//so here we construct a function that combines these filters by ANDing them together
records = [];
Ext.each(result.records, function(record) {
var isMatch = true,
length = filters.length,
i;
for (i = 0; i < length; i++) {
var filter = filters[i],
fn = filter.filterFn,
scope = filter.scope;
isMatch = isMatch && fn.call(scope, record);
}
if (isMatch) {
records.push(record);
}
}, this);
result.records = records;
result.totalRecords = result.total = records.length;
}
// sorting
sorters = operation.sorters;
if (sorters && sorters.length > 0) {
//construct an amalgamated sorter function which combines all of the Sorters passed
sorterFn = function(r1, r2) {
var result = sorters[0].sort(r1, r2),
length = sorters.length,
i;
//if we have more than one sorter, OR any additional sorter functions together
for (i = 1; i < length; i++) {
result = result || sorters[i].sort.call(this, r1, r2);
}
return result;
};
result.records.sort(sorterFn);
}
// paging (use undefined cause start can also be 0 (thus false))
if (operation.start !== undefined && operation.limit !== undefined) {
result.records = result.records.slice(operation.start, operation.start + operation.limit);
result.count = result.records.length;
}
Ext.apply(operation, {
resultSet: result
});
operation.setCompleted();
operation.setSuccessful();
Ext.Function.defer(function () {
Ext.callback(callback, scope, [operation]);
}, 10);
}
});
源码:
/**
* Paging Memory Proxy, allows to use paging grid with in memory dataset
*/
Ext.define('Ext.ux.data.PagingMemoryProxy', {
extend: 'Ext.data.proxy.Memory',
alias: 'proxy.pagingmemory',
alternateClassName: 'Ext.data.PagingMemoryProxy',
constructor: function() {
Ext.log.warn('Ext.ux.data.PagingMemoryProxy functionality has been merged into Ext.data.proxy.Memory by using the enablePaging flag.');
this.callParent(arguments);
},
read : function(operation, callback, scope){
var reader = this.getReader(),
result = reader.read(this.data),
sorters, filters, sorterFn, records;
scope = scope || this;
// filtering
filters = operation.filters;
if (filters.length > 0) {
//at this point we have an array of Ext.util.Filter objects to filter with,
//so here we construct a function that combines these filters by ANDing them together
records = [];
Ext.each(result.records, function(record) {
var isMatch = true,
length = filters.length,
i;
for (i = 0; i < length; i++) {
var filter = filters[i],
fn = filter.filterFn,
scope = filter.scope;
isMatch = isMatch && fn.call(scope, record);
}
if (isMatch) {
records.push(record);
}
}, this);
result.records = records;
result.totalRecords = result.total = records.length;
}
// sorting
sorters = operation.sorters;
if (sorters.length > 0) {
//construct an amalgamated sorter function which combines all of the Sorters passed
sorterFn = function(r1, r2) {
var result = sorters[0].sort(r1, r2),
length = sorters.length,
i;
//if we have more than one sorter, OR any additional sorter functions together
for (i = 1; i < length; i++) {
result = result || sorters[i].sort.call(this, r1, r2);
}
return result;
};
result.records.sort(sorterFn);
}
// paging (use undefined cause start can also be 0 (thus false))
if (operation.start !== undefined && operation.limit !== undefined) {
result.records = result.records.slice(operation.start, operation.start + operation.limit);
result.count = result.records.length;
}
Ext.apply(operation, {
resultSet: result
});
operation.setCompleted();
operation.setSuccessful();
Ext.Function.defer(function () {
Ext.callback(callback, scope, [operation]);
}, 10);
}
});