如何在 Grid Extjs 上添加分页
How to add Paging on Grid Extjs
我正在使用网格来显示工作正常的数据，但现在我想在网格上添加分页。我附上了我想按原样应用的分页截图。
我无法在我的网格上使用分页。请帮我解决这个问题。
我在下面附上了我的完整代码
<script type="text/javascript">
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
]
});
var activityStore = Ext.create('UserStore');
activityStore.load()
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
]
}]
})
model.show();
}
},
]
});
});
</script>
我的输出是-：
如果你想在网格中分页，我们需要通过给网格bbar 属性添加网格中的分页工具栏。
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
})
我们需要做一个分页存储，因为这里你使用的是本地 data.We 需要使用 PagingMemoryproxy。
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5, // records per page
proxy: {
type: 'memory', // paging memory proxy
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1); // loading first page
完整代码：（每页显示 5 条记录）
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5,
proxy: {
type: 'memory',
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1);
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
}),
}]
})
model.show();
}
},
]
});
});
我正在使用网格来显示工作正常的数据，但现在我想在网格上添加分页。我附上了我想按原样应用的分页截图。
我无法在我的网格上使用分页。请帮我解决这个问题。 我在下面附上了我的完整代码
<script type="text/javascript">
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
]
});
var activityStore = Ext.create('UserStore');
activityStore.load()
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
]
}]
})
model.show();
}
},
]
});
});
</script>
我的输出是-：
如果你想在网格中分页，我们需要通过给网格bbar 属性添加网格中的分页工具栏。
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
})
我们需要做一个分页存储，因为这里你使用的是本地 data.We 需要使用 PagingMemoryproxy。
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5, // records per page
proxy: {
type: 'memory', // paging memory proxy
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1); // loading first page
完整代码：（每页显示 5 条记录）
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['name', 'email', 'age']
});
Ext.define('UserStore', {
extend: "Ext.data.Store",
model: 'User',
pageSize: 5,
proxy: {
type: 'memory',
enablePaging: true,
data: [
{ name: 'Test1', email: 'a@simpsons.com', age: 19 },
{ name: 'Test2', email: 'b@simpsons.com', age: 23 },
{ name: 'Test3', email: 'c@simpsons.com', age: 45 },
{ name: 'Test4', email: 'd@simpsons.com', age: 32 },
{ name: 'Test5', email: 'e@gmail.com', age: 22 },
{ name: 'Test6', email: 'f@gmail.com', age: 23 },
{ name: 'Abh', email: 'g@gmail.com', age: 22 },
{ name: 'Test7', email: 'ashu@gmail.com', age: 29 },
{ name: 'Gt', email: 'Gt@gmail.com', age: 24 },
{ name: 'Mg', email: 'Mg@gmail.com', age: 24 },
],
}
});
var activityStore = Ext.create('UserStore');
activityStore.loadPage(1);
Ext.onReady(function () {
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
margin: 4,
padding: 4,
width: 400,
title: 'Sample',
buttons: [
{
text: 'Grid', handler: function () {
var model = new Ext.Window(
{
width: 600,
autoScroll: true,
modal: false,
minimizable: true,
maximizable: false,
title: 'Students',
listeners: {
"minimize": function (window, opts) {
window.collapse();
window.setWidth(150);
window.alignTo(Ext.getBody(), 'bl-bl')
}
},
tools: [{
type: 'restore',
handler: function (evt, toolEl, owner, tool) {
var window = owner.up('window');
window.setWidth(600);
window.expand('', false);
window.center();
}
}],
items: [{
xtype: "grid",
store: activityStore,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
align: "center",
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
sortable: false,
align: "center",
hideable: false,
dataIndex: 'email',
},
{
text: 'Age',
flex: 1,
sortable: false,
hideable: false,
align: "center",
dataIndex: 'age'
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
}),
}]
})
model.show();
}
},
]
});
});