如何在Grid Extjs上添加分页
问题描述 投票：0回答：1
我正在使用网格来显示运行良好的数据，但现在我想在网格上添加分页。我已附上分页的屏幕截图，我想按原样应用它。
我无法在网格上使用分页。请帮我解决这个问题。 我在下面附上了完整的代码
<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: '[email protected]', age: 19 },
{ name: 'Test2', email: '[email protected]', age: 23 },
{ name: 'Test3', email: '[email protected]', age: 45 },
{ name: 'Test4', email: '[email protected]', age: 32 },
{ name: 'Test5', email: '[email protected]', age: 22 },
{ name: 'Test6', email: '[email protected]', age: 23 },
{ name: 'Abh', email: '[email protected]', age: 22 },
{ name: 'Test7', email: '[email protected]', age: 29 },
{ name: 'Gt', email: '[email protected]', age: 24 },
{ name: 'Mg', email: '[email protected]', 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>
我的输出是-：
1个回答
2
投票
投票
如果你想在网格中分页，我们需要通过赋予网格的
bbar bbar: Ext.create('Ext.PagingToolbar', {
store: activityStore,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
inputItemWidth: 35,
})
我们需要创建一个分页存储，因为您正在使用本地数据。我们需要使用
PagingMemory 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: '[email protected]', age: 19 },
{ name: 'Test2', email: '[email protected]', age: 23 },
{ name: 'Test3', email: '[email protected]', age: 45 },
{ name: 'Test4', email: '[email protected]', age: 32 },
{ name: 'Test5', email: '[email protected]', age: 22 },
{ name: 'Test6', email: '[email protected]', age: 23 },
{ name: 'Abh', email: '[email protected]', age: 22 },
{ name: 'Test7', email: '[email protected]', age: 29 },
{ name: 'Gt', email: '[email protected]', age: 24 },
{ name: 'Mg', email: '[email protected]', 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: '[email protected]', age: 19 },
{ name: 'Test2', email: '[email protected]', age: 23 },
{ name: 'Test3', email: '[email protected]', age: 45 },
{ name: 'Test4', email: '[email protected]', age: 32 },
{ name: 'Test5', email: '[email protected]', age: 22 },
{ name: 'Test6', email: '[email protected]', age: 23 },
{ name: 'Abh', email: '[email protected]', age: 22 },
{ name: 'Test7', email: '[email protected]', age: 29 },
{ name: 'Gt', email: '[email protected]', age: 24 },
{ name: 'Mg', email: '[email protected]', 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();
}
},
]
});
});
最新问题
- “dotnet ef”命令在 .NET Core 2.2 中不起作用
- 当我运行且相机在 Roblox Studio 中编写脚本时，部分会被删除
- 隐藏页面中的 FullCalendar SchedulerLicenseKey
- 根据另一个表的结果从一个表中选择计数
- Python 子进程仅在 cron 中返回非零退出状态
- ActiveMQ XStream ForbiddenClassException
- 在 MacOS Sequoia 上挂载 Windows 共享
- ProcessError：警告：无法删除_next/static/.../：权限被拒绝
- 在浏览器中将图像从 PHP 导入到 PDFKit 时出现问题 - fs.readFileSync 不是函数
- 将 null 设置为输入字段的空字符串值
- '错误：应指定插件名称'@svgr/webpack svgoConfig
- 如何在Cartopy中应用具有极地立体投影的地球特征和陆地/海洋掩模？
- 严格两相锁定示例
- Firebase Analytics logEvent 异步运行
- 当refit=True时，为什么要在RandomizedSearchCV之后进行额外的拟合？
- 通过子字符串列表过滤DataFrame
- 在docker中使用buildkit并运行--mount，为什么cabal install下载缓存的包？
- 在分离器中读取多个帧
- 为什么 tls.Client 失败并显示消息：第一条记录看起来不像 TLS 握手
- 大师冥想错误：ESP32 上的 Core 1 Panic'ed（禁止加载）
© www.soinside.com 2019 - 2024. All rights reserved.