ext GridPanel 分页

最新推荐文章于 2016-07-28 15:17:45 发布

原创最新推荐文章于 2016-07-28 15:17:45 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #XHTML #HTML

EXT 专栏收录该内容

46 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用 Ext JS 框架中的 GridPanel 实现分页功能。示例中创建了一个包含复选框选择模型的表格，并通过 MemoryProxy 提供数据。表格展示了编号、名称、日期等字段，并且可以进行分页浏览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ext</title>

<script src="adapter/ext/ext-base.js" type="text/javascript"></script>

<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />

<script src="ext-all.js" type="text/javascript"></script>

<script type="text/javascript">
Ext.onReady(function() {
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{ header: '编号', dataIndex: 'id', sortable: true },
{ header: '名称', dataIndex: 'name' },
{ header: '日期', dataIndex: 'date' },
{ header: '描述', dataIndex: 'descn' }
]);

var data = [
['1', 'name1', '2008-11-10', 'descn1'],
['2', 'name2', '2008-11-08', 'descn2'],
['3', 'name3', '2008-11-11', 'descn3'],
['4', 'name4', '2008-11-12', 'descn4'],
['5', 'name5', '2007-11-11', 'descn5'],
['4', 'name4', '2008-11-12', 'descn4'],
['4', 'name4', '2008-11-12', 'descn4'],
['4', 'name4', '2008-11-12', 'descn4']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{ name: 'id' },
{ name: 'name' },
{ name: 'descn' }
]),
remoteSort: true
});
ds.load({ params: { start: 0, limit: 2} });

var grid = new Ext.grid.GridPanel({
el: 'div1',
ds: ds,
cm: cm,
sm: sm,
bbar: new Ext.PagingToolbar({
pageSize: 2,
store: ds,
beforePageText: '第',
afterPageText: '页- 共{0}页',
displayMsg: '显示 {0} - {1}条 / 共{2}条',
emptyMsg: "暂无数据"

})

});
grid.render();
})

</script>

</head>
<body>
<div id='div1'></div>
</body>
</html>