ext网格实践

打开eclipse,新建web project

1、  首先把ext2.0包拷贝到WebRoot目录:

2、  WebRoot目录下新建ext_query.html文件:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK">

<title>Ext2.0查询示例title>

   

    <link rel="stylesheet" type="text/css" href="./js/ext2.0/resources/css/ext-all.css" />

    <script type="text/javascript" src="./js/ext2.0/adapter/ext/ext-base.js">script>

    <script type="text/javascript" src="./js/ext2.0/ext-all.js">script>

   

    <script type="text/javascript" src="./js/ext2.0/build/locale/ext-lang-zh_CN-min.js">script>

   

   

    <script type="text/javascript" src="ext_query.js">script>

   

    <style type="text/css">

    body{padding:10px;}

    .icon-grid {background-image:url(images/icons/fam/grid.png) !important;}

        .red{color:red; font-weight:bold;}

        .green{color:green; font-weight:bold;}

        .icon-search {background-image:url(images/icons/fam/application_go.png) !important;}

        .icon-del{background-image:url(images/icons/fam/delete.gif) !important;}

    style>

 

head>

<body>

   

    <script type="text/javascript" src="./js/ext2.0/examples/examples.js">script>

   

    <div id="grid" >div>

    <div id="debuger">div>

body>

html>

注意阴影部分代码。编辑完保存,这个文件基本上会固定不变了。

 

3、  然后使用ext API编写脚本文件ext_query.js

 

Ext.onReady(function(){

    //初始化鼠标提示

    Ext.QuickTips.init();

   

    //设置从服务器读取数据的方式,即把服务端返回的数据解析(转换)为Record格式、

    //由于namemapping的名字一样,故省略了mapping属性

    var fds = Ext.data.Record.create([

       {name:'type',type:'string'},

       {name:'id',type:'int'},

       {name:'dest',type:'string'},

       {name:'source',type:'string'},

       {name:'content',type:'string'}

       ,{name:'sendtime',type:'string'} //数据读取格式

    ]);

   

    var today = new Date().dateFormat('Y-m-d');

   

 

    //数据储备器(设置服务器端数据在客户端的缓存方式)

    var signStore = new Ext.data.JsonStore({

       url:'./ext_query.jsp',

       baseParams:{startDate:today,endDate:today,number:'',command:'query'},

       //totalProperty:'count',

       root:'records',//records是服JSONObject对象,必须是集合

       fields:fds,

       sortInfo:{field:'id',direction:'ASC'}

    });

    //全选Checkbox

    var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});

   

    //列模型

    var columnModel = new Ext.grid.ColumnModel([

       sm,

       new Ext.grid.RowNumberer(),{

           header:'目标号码',

           dataIndex:'dest',

           width:100

       },{

           header:'源号码',

           dataIndex:'source',

           width:80

       },{

           header:'内容',

           dataIndex:'content',

           width:220

       },{

           header:'发送时间',

           dataIndex:'sendtime',

           width:80

       },{

           header:'业务类型',

           dataIndex:'type',

           width:80

       }, {

           header: "id",

           dataIndex: 'id',

           width: 50,

           hidden: true,//本列隐藏

           sortable: true

       }

    ]);

    columnModel.defaultSortable=true;

   

    //查询-开始日期

    var sdField = new Ext.form.DateField({

       id:'startDate',

       name:'startDate',

       format:'Y-m-d',

       minValue:'2008-02-01',

       maxValue:today,

       allowBlank:false,

       value:today

    });

    //查询-结束日期

    var edField = new Ext.form.DateField({

       id:'endDate',

       name:'endDate',

       format:'Y-m-d',

       minValue:'2008-02-01',

       maxValue:today,

       allowBlank:false,

       value:today

    });

    //查询-手机号

    var fldNumber=new Ext.form.TextField({

       id:'number',

       name:'number'

    });

   

    //查询按钮

    var btnSearch = new Ext.Button({

       text:'查询',

       iconCls:'icon-search',

       handler:function(){

           if(sdField.isValid() && edField.isValid()){

              signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d');

              signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d');

              signStore.baseParams.number=fldNumber.getValue();

           }

           signStore.load();

       }

    });

   

    //创建Grid

    var signGrid = new Ext.grid.GridPanel({

       store:signStore,

       cm:columnModel,

       sm:sm,

       renderTo:'grid',

       width:650,

       height:440,

       title:'短信队列查询',

       frame:true,

       iconCls:'icon-grid',

       loadMask:true,

       stripeRows:true,

       tbar:[

           '日期从',sdField,' ',edField,手机号 ',fldNumber,'  ',btnSearch,'-'

       ]

    });

   

    signStore.load();

   

});

 

以上代码比较复杂,但只需注意代码中标注的-处即可。

①设置服务端数据的读取格式(DataReader),即把服务端返回的JSONObject对象映射为Record对象;

②准备数据存储器,即规定如何从服务端获取数据并缓存到客户端的Record对象,这里会使用ajax请求获取服务端数据,且在此指定服务端url地址

③设置列模型,即数据在网格上的显示方式,并将列和Record对象的属性进行绑定

④创建grid,即把列模型和grid绑定,并设置grid的工具栏等;

 

4、  编写后台服务,这里是ext_query.jsp页面。为了简单起见,ext_query.jsp仅仅是随便生成了一些测试数据,并以JSONObject对象的格式输出:

<%@ page contentType="text/html; charset=GBK"%>

<jsp:directive.page import="org.json.*"/>

<%

    String command = request.getParameter("command");

    System.out.println("command:" + command);

    if ("query".equals(command)) {

       String startDate = request.getParameter("startDate");

       String endDate = request.getParameter("endDate");

       String number=request.getParameter("number");

       System.out.println("startdate:" + startDate + "__enddate:"

              + endDate+"__number:"+number);

       JSONArray signs = new JSONArray();

       for (int i = 0; i < 12; i++) {

           JSONObject sign = new JSONObject();

           sign.put("id",i+1).put("dest", "08712875577").put("source", "106295598")

                  .put("type","-DFTZ").put("content", "短信测试" + i).put("sendtime",

                         "2010-01-01 01:02:03.05");

           signs.put(sign);

       }

       JSONObject json = new JSONObject();

       json.put("records", signs);

       out.print(json);//输出json数据

       //System.out.print(signLog);

    }

%>

显然,大部分情况下我们的都是从数据库中得到的,这只需要对ext_query.jsp进行简单修改就可以了。

 

5、  运行工程,最终效果如下:

 

 

现在我们来给grid加上分页功能。

 

6、  首先需要修改服务端代码ext_query.jsp,在返回的JSONObject对象中加上一个totalCount属性,并根据ext传来的两个参数startlimit返回不同的页数据:

<%@ page contentType="text/html; charset=GBK"%>

<jsp:directive.page import="org.json.*"/>

<%

    String command = request.getParameter("command");

    String start=request.getParameter("start");

    start=start==null||"".equals(start)?"0":start;

    String limit=request.getParameter("limit");

    limit=limit==null||"".equals(limit)?"10":limit;

    int iStart=Integer.parseInt(start);

    int iLimit=Integer.parseInt(limit);

    int total=32;

    int max=total;

    if(iStart+iLimit

    System.out.println("command:" + command+" start:"+start+" limit:"+limit);

    if ("query".equals(command)) {

       String startDate = request.getParameter("startDate");

       String endDate = request.getParameter("endDate");

       String number=request.getParameter("number");

       System.out.println("startdate:" + startDate + "__enddate:"

              + endDate+"__number:"+number);

       JSONArray signs = new JSONArray();

       //System.out.println(signs.length());

       int i = iStart;

       for (; i < max; i++) {         

           JSONObject sign = new JSONObject();

           sign.put("id",i+1).put("dest", "08712875577").put("source", "106295598")

                  .put("type","-DFTZ").put("content", "短信测试" + i).put("sendtime",

                         "2010-01-01 01:02:03.05");

           signs.put(sign);

       }

       JSONObject json = new JSONObject();

       json.put("records", signs).put("totalCount",total);

       out.print(json);//输出json数据

       //System.out.print(signs.toString());

    }

%>

注意阴影部分修改的代码。运行浏览ext_query.jsp,可以看到返回的JSONObject对象最后增加了一个属性totalCount,并且根据请求参数startlimit只返回当页的数据:

 

7、  修改ext_query.js,首先增加一个全局变量:

//页大小

    var pageSize=10;

然后构建一个分页工具栏:

//构造分页工具栏

    var pagingToolbar = new Ext.PagingToolbar({

       pageSize: pageSize,

       store: signStore,

       displayInfo: true,

       displayMsg: '{0}-{1}条,一共{2}',

       emptyMsg: "没有记录",

       items: [

           '-', btnDel

       ]     

    });

在创建grid时把分页工具栏添加进去:

    //创建Grid

    var signGrid = new Ext.grid.GridPanel({

       ……

       bbar: pagingToolbar

    });

最后,在load store时需要增加两个参数startlimit

signStore.load({ params: { start: 0, limit: 10} });

 

运行效果如图:

 

 

8、  最后再完善一下。序号列每一页都从1开始,似乎不太合理,应改为记录在整个记录中的序号才合理。

首先增加一个全局变量:

//起始序号

    var record_start=0;

在构造分页工具栏时增加处理函数,使得翻页后把每次翻页的起始记录号记录下来:

//构造带分页工具栏

    var pagingToolbar = new Ext.PagingToolbar({

        ……

       doLoad : function(start){

            record_start = start;//记录每次翻页后的起始序号

              //另外,由于翻页函数被覆盖了,还需要在加载数据时传递limitstart

          var o = {}, pn = this.paramNames;

          o[pn.start] = start;

          o[pn.limit] = this.pageSize;

          this.store.load({params:o});

     }

    });

最后,修改列模型,把序号列的计算方式改为:

//列模型

    var columnModel = new Ext.grid.ColumnModel([

       ……

       new Ext.grid.RowNumberer({

            renderer:function(value,metadata,record,rowIndex){

                   return record_start + 1 + rowIndex;

            }

         }),……

    ]);

现在再来看翻页效果:

 

序号已经过重新计算了。源码下载:ext网格实践

你可能感兴趣的:(javascript,ext,网格,command,string,header,json)