extjs2.0:GridPanel分页例子

最新推荐文章于 2016-09-01 18:15:00 发布

aa00aa00

最新推荐文章于 2016-09-01 18:15:00 发布

阅读量118

点赞数

分类专栏： Extjs学习笔记文章标签： EXT CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/aa00aa00/article/details/83525813

版权

Extjs学习笔记专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国Java开源产品及团队</title>
<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>

</head>

<body>
    <script>
    Ext.onReady(function(){
        //定义数据二维数组
        var data=[
                    ['1','male', 'nam1','descn1'],
                    ['2', 'female','nam2','descn2'],
                    ['3', 'male','nam3','descn3'],
                    ['4', 'female','nam4','descn4'],
                    ['5', 'male','nam5','descn5'],
                 ];



        function renderSex(value) {
        if(value == 'male'){
           return "<span style='color:red:font-weight:bold:'>红男</span>";
        } else {
            return "<span style='color:green:font-weight:bold:'>绿女</span>";
        }
        }


        //整理数据定义3列的索引为id,name,descn
        var store=new Ext.data.SimpleStore({
                         data:data,fields:['id','sex','name','descn']
                      });

        //定义勾选框，不需要可不必定义
        var sm = new Ext.grid.CheckboxSelectionModel();
        //定义列,在这里定义每列的宽度
        var colM=new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),//增加自动编号，不需要可不必定义
            sm,//勾选框，不需要可不必定义
            {header:'编号',dataIndex:'id',width:170,sortable:true},// 生成列，sortable为列排序，不需要设置为false，默认false，renderer为该列增加自定义函数
            {header:'性别',dataIndex:'sex',width:170,renderer:renderSex}, // sortable进行排序
            {header:'名称',dataIndex:'name',width:170,sortable:true},
            {header:'描述',dataIndex:'descn',width:170}
        ]);

        //生成表格
        var grid = new Ext.grid.GridPanel({
            renderTo:'show',
            title:"中国Java开源产品及团队",
            height:200,
            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>

放在extjs包下,就可以运行,注意指定:ext-all.css;ext-base.js;ext-all.js文件的路径.

aa00aa00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs2.0:GridPanel分页例子

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
复制链接

扫一扫

专栏目录