`
aa00aa00
  • 浏览: 327145 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
文章分类
社区版块
存档分类
最新评论

extjs分页

EXTJavaScriptCSSPHPjson 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>  
<HEAD>  
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../examples.js"></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,
            trackMouseOver:false,
           loadMask: {msg:'正在加载数据，请稍侯……'},
            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>

这个例子,可以参考!!

分享到：
| extjs2.0:GridPanel分页例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics