本地分页
1.配置MemoryProxy的data属性
Ext.define('app.view.test.region.Form', {
extend: 'Ext.Panel',
alias: 'widget.testform',
modal: true,
layout: 'border',
initComponent: function() {
this.items = [];
function createGrid() {
var data = [{
app_id: '1',
app_name: 'QQ',
cete_name: '社交'
}, {
app_id: '2',
app_name: '微信',
cete_name: '社交'
}, {
app_id: '3',
app_name: 'QQ空间',
cete_name: '社交'
}];
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
pageSize: 3, //每页记录数量
autoLoad: true, //自动加载，需要配置MemoryProxy的data属性，手动经测试无法分页，不知道是不是bugproxy: new Ext.data.MemoryProxy({
data: data,
reader: {
type: 'json'
},
enablePaging: true //是否需要分页})
});
var pagingToolbar = new Ext.PagingToolbar({
store: store,
displayInfo: true
}); //分页控件
var grid = {
xtype: 'grid',
width: 500,
height: 250,
frame: true,
title: 'Extjs实现本地分页',
iconCls: 'icon-grid',
renderTo: document.body,
columns: [{
header: 'app_id',
dataIndex: 'app_id',
flex: 1
}, {
header: 'app_name',
dataIndex: 'app_name',
flex: 1
}, {
header: 'cete_name',
dataIndex: 'cete_name',
flex: 1
}],
store: store,
bbar: pagingToolbar
};
return grid;
}
this.items = [{
region: 'center',
xtype: 'panel',
name: 'listpanel',
split: true,
autoScroll: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [createGrid()],
}];
this.callParent();
}
});
2.监听chang事件，捕获相关状态进行针对逻辑操作
Ext.define('app.view.test.region.Form', {
extend: 'Ext.Panel',
alias: 'widget.testform',
modal: true,
layout: 'border',
initComponent: function() {
this.items = [];
function createGrid() {
var itemsPerPage = 2;
var store = new Ext.data.Store({
fields: [
'app_id',
'app_name',
'cete_name',
],
data: [{
app_id: '1',
app_name: 'QQ',
cete_name: '社交'
}, {
app_id: '2',
app_name: '微信',
cete_name: '社交'
}, {
app_id: '3',
app_name: 'QQ空间',
cete_name: '社交'
}];
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
var grid = {
xtype: 'grid',
// title: 'Extjs grid 分页',
name: 'datagrid',
hidden: false,
region: 'center',
width: '100%',
autoScroll: true,
store: store,
columns: [{
header: 'APPID',
dataIndex: 'app_id',
align: 'center',
flex: 1
}, {
header: 'APP名称',
dataIndex: 'app_name',
align: 'center',
flex: 1
}, {
header: '类目',
dataIndex: 'cete_name',
align: 'center',
flex: 1
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // GridPanel使用相同的数据源
dock: 'bottom',
displayInfo: true,
listeners: { //根据change事件捕获相关状态进行针对逻辑操作
change: function(me, pageData, eOpts) {
var newData = [{
app_id: '1',
app_name: 'QQ',
cete_name: '社交'
}, {
app_id: '2',
app_name: '微信',
cete_name: '社交'
}];
store.loadData(newData);
console.log(me); //当前对象
console.log(pageData.total); //记录的数据集作为服务器返回的总数
console.log(pageData.currentPage); //当前页码
console.log(pageData.pageCount); //数据的总页数
console.log(pageData.toRecord); //当前页面的起始记录索引
console.log(pageData.fromRecord); //当前页面的结束记录索引
console.log(eOpts); //当前函数
}
}
}]
};
return grid;
}
this.items = [{
region: 'center',
xtype: 'panel',
name: 'listpanel',
split: true,
autoScroll: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [createGrid()],
}];
this.callParent();
}
});
远程服务器分页
grid远程分页
Ext.define('app.view.test.region.Form', {
extend: 'Ext.Panel',
alias: 'widget.testform',
modal: true,
layout: 'border',
initComponent: function() {
this.items = [];
function createGrid() {
var store = new Ext.data.Store({
id: 'gridStore',
autoLoad: false,
fields: [
'app_id',
'app_name',
'cete_name',
],
data: [{
app_id: '1',
app_name: 'QQ',
cete_name: '社交'
}, {
app_id: '2',
app_name: '微信',
cete_name: '社交'
}, {
app_id: '3',
app_name: 'QQ空间',
cete_name: '社交'
}];
pageSize: 1000, //每页记录数量
proxy: {
type: 'ajax',
method: 'get',
url: '/ajax/ListRS1Data', // 请求URL加载数据
extraParams: {
start_day: Ext.Date.format(new Date(new Date() - 86400)), 'Ymd'),
end_day: Ext.Date.format(new Date(), 'Ymd'),
},
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total',
successProperty: 'ret'
}
}
});
store.load({
params: {
start: 0,
limit: itemsPerPage
}
});
var grid = {
xtype: 'grid',
// title: 'Extjs grid 分页',
name: 'datagrid',
hidden: false,
region: 'center',
width: '100%',
autoScroll: true,
store: store,
columns: [{
header: 'APPID',
dataIndex: 'app_id',
align: 'center',
flex: 1
}, {
header: 'APP名称',
dataIndex: 'app_name',
align: 'center',
flex: 1
}, {
header: '类目',
dataIndex: 'cete_name',
align: 'center',
flex: 1
}],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // GridPanel使用相同的数据源
dock: 'bottom',
pageSize: 1000, //每页记录数量
displayInfo: true
}],
};
return grid;
}
this.items = [{
region: 'center',
xtype: 'panel',
name: 'listpanel',
split: true,
autoScroll: true,
layout: 'anchor',
defaults: {
anchor: '100%'
},
items: [createGrid()],
}];
this.callParent();
}
});
动态改变参数
clickSearch: function() {
var self = this.getView();
var panel = self.down('panel[name=listpanel]');
var grid = panel.down('grid');
var form = panel.down('form');
var selectValue = form.getValues();
var store = grid.getStore();
var proxy = store.getProxy();
proxy.extraParams = {};
if (proxy) {
Ext.apply(proxy.extraParams, selectValue);
if (store.isLoaded() || store.autoLoad) {
store.removeAll();
store.loadPage(1);
}
}
}