如何在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();
}
},
]
});
});
最新问题
- 如何让用户输入输入小数以及整数？
- 即使将 select 设置为模型，值也不会改变
- AWS SAM 通过动态引用从 Secret Manager 检索密钥值
- 如何在 React Hook Form v7 中使用软验证（又名提示或警告消息）
- Linux 检查蓝牙 RSSI，无需配对和连接
- 音频录制脚本无法在 WSL2 Ubuntu 上运行
- 在 ubuntu 20 上为 python-3.8 创建 virtualenv 的盐状态
- 旋转和调整图像大小
- 构建颤动中的第 1687 行
- Div 中的角度组件结构
- 将 pct_change 用于 DateTime (sub)Index 并使用 group_by 用于多索引数据框
- Next.JS/React 表单，执行顺序问题
- java CriteriBuilder 掩码列值
- 天蓝色政策 |拒绝从虚拟机中删除用户分配的身份的操作不起作用
- Pandas - 使用 pct_change 作为 DateTime (sub)Index 以及使用 group_by 作为多索引数据框
- 如何将数据从 Azure Cosmos DB 帐户导出到本地 .json 文件？
- 风格的matter-js主体
- 在并发 Haskell 中原子地修改多个 IORef
- 如何从 Java 中的静态上下文动态访问非静态变量？
- 在 MobileDateTimePicker (MUI) 中将时钟更改为 MultiSectionDigitalClock
© www.soinside.com 2019 - 2024. All rights reserved.