EXT2.0: GridPanel 分页方法绝好例子

EXT2.0: GridPanel 分页方法绝好例子

将代码保持成html文件,放在ext 包路径下面,直接打开即可,看到效果

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>  
  3. <HEAD>  
  4.     <LINK href="ext2.0/resources/css/ext-all.css" type=text/css rel=stylesheet>    
  5.     <SCRIPT src="ext2.0/adapter/ext/ext-base.js" type=text/javascript></SCRIPT>  
  6.     <SCRIPT src="ext2.0/ext-all.js" type=text/javascript></SCRIPT>  
  7.   
  8.     <SCRIPT>  
  9.     Ext.onReady(function(){    
  10.         //自定义列,可以更改显示内容,比如 常用到的 0:男 1:女   
  11.         function check(value)   
  12.         {   
  13.            if (value=='195154')   
  14.            {   
  15.                return '<span style="color:red;font-weight:bold;">内容已更改</span>';   
  16.            }    
  17.            else   
  18.            {   
  19.                return value;   
  20.            }   
  21.         }   
  22.            
  23.         //跨域读取数据使用 ScriptTagProxy url=http://extjs.com/forum/topics-remote.php   
  24.        //可以直接访问 http://extjs.com/forum/topics-remote.php 查看json 数据形式   
  25.         var store = new Ext.data.Store({   
  26.                 proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),   
  27.                 reader: new Ext.data.JsonReader({   
  28.                     root: 'topics',   
  29.                     totalProperty: 'totalCount',   
  30.                     id: 'post_id'   
  31.                     },[   
  32.                     'post_id','topic_title','author'   
  33.                 ])   
  34.                 });   
  35.            store.load({params:{start:0, limit:10}});   
  36.   
  37.   
  38.         //定义勾选框,不需要可不必定义   
  39.         var sm = new Ext.grid.CheckboxSelectionModel();   
  40.            
  41.         //定义列   
  42.         var colM=new Ext.grid.ColumnModel([   
  43.             new Ext.grid.RowNumberer(),//增加自动编号,不需要可不必定义   
  44.             sm,//勾选框,不需要可不必定义   
  45.             {header:'列1',dataIndex:'post_id',width:170,sortable:true,renderer:check},   
  46.             // 生成列,sortable为列排序,不需要设置为false,默认false,renderer为该列增加自定义函数   
  47.             {header:'列2',dataIndex:'topic_title',width:170,sortable:true},   
  48.             {header:'列3',dataIndex:'author',width:170}   
  49.         ]);   
  50.            
  51.         //生成表格   
  52.         var grid = new Ext.grid.GridPanel({   
  53.             renderTo:'show',   
  54.             title:"表格",   
  55.             height:400,   
  56.             width:600,    
  57.             cm:colM,   
  58.             sm:sm,   
  59.             store:store,   
  60.             viewConfig: {   
  61.                             forceFit:true   
  62.             },   
  63.             bbar: new Ext.PagingToolbar({   
  64.                 pageSize: 10,   
  65.                 store: store,   
  66.                 displayInfo: true,   
  67.                 displayMsg: '第{0} 到 {1} 条数据 共{2}条',   
  68.                 emptyMsg: "没有数据"   
  69.             })   
  70.         });    
  71.   
  72.     });   
  73.     </SCRIPT>  
  74.     <DIV id=show></DIV>  
  75. </body>
  76. </html>

 

运行效果如图:EXT2.0: GridPanel 分页方法绝好例子

 

你可能感兴趣的:(JavaScript,PHP,json,css,ext)