Ext之GridPanel

qinjingkai

浏览: 259817 次
性别:
来自: 广州

最近访客更多访客>>

RacheAngel

ms143014

快乐编程

fallout2

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (74)

社区版块

存档分类

EXT JavaScript CSS HTML

开发中经常要实现把数据库中某张表的数据填充到前台中的一个表格，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>