Ext之GridPanel

最新推荐文章于 2013-02-27 16:06:47 发布

qinjingkai

最新推荐文章于 2013-02-27 16:06:47 发布

阅读量76

点赞数

文章标签： EXT JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/qinjingkai/article/details/83360264

版权

开发中经常要实现把数据库中某张表的数据填充到前台中的一个表格，Ext中用的是GridPanel,步骤如下：

1 建立一个数据Store new

2 建立一个CheckboxSelectionModel

3建立一个ColumnModel 指定好处理每一列数据的方式

4 建立一GridPanel 并为其指定sm,store,cm等各个属性

5 调用store.load 和GridPanel的render 实现显示

参考代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>测试001.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
    <script type="text/javascript" src="../scripts/ext/examples.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../scripts/js/student.js"></script>





    <script type="text/javascript">


     Ext.onReady(function(){
         var ds=new Ext.data.Store ({
            proxy:new Ext.data.HttpProxy({
                  url:'../getSomeStu.do',
                  method:'post'
            }),
            reader:new Ext.data.JsonReader({
               root:'list',
               totalProperty:'totalCount',
               fields:[
                      {name:"stuId"},
                      {name:"name"},
                      {name:"sex"},
                      {name:"birthday"},
                      {name:"passport"},
               ]
            })

         });

        //ds.setDefaultSort('stuId', 'asc'); 是否排序

         var sm=new Ext.grid.CheckboxSelectionModel();


         var cm=new Ext.grid.ColumnModel ([sm,
                                         {header:'编号',dataIndex:'stuId',width:100},
                                         {header:'名字',dataIndex:'name',width:100},
                                         {header:'性别',dataIndex:'sex',width:100},
                                         {header:'出生年月',dataIndex:'birthday',width:170,
                                              renderer:function(value,cellmeta,record,rowIndex,columnIndex,color_store){
                                                if(value!=null){
                                                    var temp=new Date(record.get('birthday').time).format('y-M-d');
                                                    return temp;
                                                }else{
                                                    return null;
                                                }

                                              }
                                            },
                                         {header:'身份证号',dataIndex:'passport',width:100},

                                         {header:'操作',dataIndex:'stuId',width:300,
                                               renderer: function(value,cellmeta,record,rowIndex,columnIndex,color_store){
                                                  var hrefHtml="<a href=queryStudentById.html?stuid="+value+">查看</a>";
                                                   hrefHtml+="---";
                                                  hrefHtml+="<a href=modifyStudent.html?stuid="+value+">修改</a>";
                                                   hrefHtml+="---";
                                                  hrefHtml+="<a href=javascript:delStuById("+value+")>删除</a>";
                                                   hrefHtml+="---";
                                                  hrefHtml+="<a href=addStudent.html?stuid="+value+">增加新记录</a>";
                                                  return hrefHtml;
                                               }
                                             }

                                         ]);

//设置列是否可以排序

/cm.defaultSortable=true;

         var totalStudent=new Ext.grid.GridPanel ({
                     el:'totalStudent',
                     renderTo:'totalStudent',
                     width:1000,
                     height:400,
                     ds:ds,
                     cm:cm,
                     sm:sm,
                     bbar:new Ext.PagingToolbar({
                     store:ds,
                     pageSize:2,
                     displayInfo:true,
                     emptyMsg:'找不到相关数据'
                     })

         });


         ds.load({params:{start:0,limit:2}});
         totalStudent.render();








     });


    </script>

</head>

<body>
      <div id="totalStudent"></div>
</body>
</html>