EXT2.0: GridPanel 分页方法绝好例子
将代码保持成html文件,放在ext 包路径下面,直接打开即可,看到效果
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <LINK href="ext2.0/resources/css/ext-all.css" type=text/css rel=stylesheet>
- <SCRIPT src="ext2.0/adapter/ext/ext-base.js" type=text/javascript></SCRIPT>
- <SCRIPT src="ext2.0/ext-all.js" type=text/javascript></SCRIPT>
- <SCRIPT>
- Ext.onReady(function(){
- //自定义列,可以更改显示内容,比如 常用到的 0:男 1:女
- function check(value)
- {
- if (value=='195154')
- {
- return '<span style="color:red;font-weight:bold;">内容已更改</span>';
- }
- else
- {
- return value;
- }
- }
- //跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php
- //可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式
- var store = new Ext.data.Store({
- proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),
- reader: new Ext.data.JsonReader({
- root: 'topics',
- totalProperty: 'totalCount',
- id: 'post_id'
- },[
- 'post_id','topic_title','author'
- ])
- });
- store.load({params:{start:0, limit:10}});
- //定义勾选框,不需要可不必定义
- var sm = new Ext.grid.CheckboxSelectionModel();
- //定义列
- var colM=new Ext.grid.ColumnModel([
- new Ext.grid.RowNumberer(),//增加自动编号,不需要可不必定义
- sm,//勾选框,不需要可不必定义
- {header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},
- // 生成列,sortable为列排序,不需要设置为false,默认false,renderer为该列增加自定义函数
- {header:'列2',dataIndex:'topic_title',width:170,sortable:true},
- {header:'列3',dataIndex:'author',width:170}
- ]);
- //生成表格
- var grid = new Ext.grid.GridPanel({
- renderTo:'show',
- title:"表格",
- height:400,
- width:600,
- cm:colM,
- sm:sm,
- store:store,
- viewConfig: {
- forceFit:true
- },
- bbar: new Ext.PagingToolbar({
- pageSize: 10,
- store: store,
- displayInfo: true,
- displayMsg: '第{0} 到 {1} 条数据 共{2}条',
- emptyMsg: "没有数据"
- })
- });
- });
- </SCRIPT>
- <DIV id=show></DIV>
- </body>
- </html>
运行效果如图: