ext网格实践 - 走看看

zoukankan html css js c++ java

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格式、

    //由于name和mapping的名字一样，故省略了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',

           100

       },{

           header:'源号码',

           dataIndex:'source',

           80

       },{

           header:'内容',

           dataIndex:'content',

           220

       },{

           header:'发送时间',

           dataIndex:'sendtime',

           80

       },{

           header:'业务类型',

           dataIndex:'type',

           80

       }, {

           header: "id",

           dataIndex: 'id',

           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',

       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传来的两个参数start和limit返回不同的页数据：

<%@ 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<total)max=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，并且根据请求参数start和limit只返回当页的数据：

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时需要增加两个参数start和limit：

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

运行效果如图：

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

首先增加一个全局变量：

//起始序号

    var record_start=0;

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

//构造带分页工具栏

    var pagingToolbar = new Ext.PagingToolbar({

       ……

       doLoad　:　function(start){

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

              //另外，由于翻页函数被覆盖了，还需要在加载数据时传递limit和start

　　　　　　　　　　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网格实践

查看全文

相关阅读:
比特币节点同步问题
 Vue用axios跨域访问数据
 vue之vue-cookies安装和使用说明
 vuejs目录结构启动项目安装nodejs命令，api配置信息思维导图版
 使用以太坊智能合约实现面向需要做凭证的企业服务帮助企业信息凭证区块链化
 将任意文件写入以太坊区块的方法，把重要事件，历史事件，人生轨迹加密记录到区块链永久封存
 Linux下几种重启Nginx的方式，找出nginx配置文件路径和测试配置文件是否正确
 php小数加减精度问题，比特币计算精度问题
 Fabric架构：抽象的逻辑架构与实际的运行时架构
 国外互联网大企业（flag）的涨薪方式

原文地址：https://www.cnblogs.com/encounter/p/2188547.html