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

最新推荐文章于 2018-11-06 10:51:14 发布

Carl_YC

最新推荐文章于 2018-11-06 10:51:14 发布

阅读量128

点赞数

分类专栏： ExtJS专栏文章标签： EXT CSS PHP JavaScript json ViewUI

ExtJS专栏专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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>
 

运行效果如图：

Carl_YC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXT2.0: GridPanel 分页方法绝好例子

EXT2.0: GridPanel 分页方法绝好例子将代码保持成html文件，放在ext 包路径下面，直接打开即可，看到效果 &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;LINK href="ext2.0/resourc...
复制链接

扫一扫