extjs 查询数据

前言

这两天用extjs做项目，因为以前没用过这个框架，头一次上手难免除了许多问题
做个项目简单描述，简单的查数据，extjs是有分页效果的模块的，但是项目要求的和分页一字之差，分天
boss:将这没卵用的程序猿杀了以祭天~~~
可以简单理解为查账，先查今天，然后查昨天和明天的（主要是楼主没理解分页模块，不知道怎么改23333）

工具

extjs里的Ext.Ajax.request

js代码

function details(){
     var panel = new Ext.Panel({
                     width: 730,
         //虽然下面window有宽度，但是panel也需要定义
         //就好像一个桌子可以放苹果，但是你不能说我放了一个苹果就把桌子占满了，除非你定义苹果有桌子大
                     //table的宽度不是panel的宽度，而是panel宽度减去滚动条的
                     height: 343,
                     bodyStyle : 'overflow-y:scroll',//滚动条
                     renderTo: Ext.getBody() ,
                     //百度上说是将你这个组件渲染到页面上
                     //然而并不清楚啥意思，哈哈哈哈，项目前主人留下来的         
                 });
     var template = new Ext.XTemplate(mytable);
     var mytable='<table style="text-align: center;" >',
                 '<tr  style="height:40px" bgcolor="EFEFF0">
<td style="width:70px;">名称</td></tr>',
                  '<tpl for=".">',
                  '<tr style="height:30px " class="{[xindex % 2 === 0 ? "even" : "odd"]}">
                  <td>{Time}</td><td>{Name}</td></tr>',
                  '</tpl>',
                  '</table>';
     //说实话，这段代码又长又臭，我都懒得复制，简单说一下把，
      //<tpl for="."></tpl>这个是拿来循环的
     //class="{[xindex % 2 === 0 ? "even" : "odd"]}"这句话是用来实现循环行的时候分行颜色的
...
//中间省略n个获取数据的代码
    win = new Ext.Window({//因为项目的要求是点击按钮打开一个新窗口
        title: '查询数据',//标题
        width : 740,
        height : 400,
        layout : 'border',//窗口显示模式，有兴趣的可以百度看看
        resizable: true,//是否可以改变大小，默认可以
        modal: true,//true窗口后面的内容都不能操作，默认为false
        closable: true,//关闭窗口按钮
        maximizable: false,//窗口最大化
        minimizable: false,//最小化
        items: [panel],//窗口里包含的是一开始定义的panel
        //autoScroll:true,
        //注意：你在window里面放一个panel，然后你循环遍历的数据如果比窗口大，你得把滚动条放在panel里
        //因为你数据是遍历在panel里，而不是直接放在window里

        bbar:[{//简单理解就是window上底部的工具栏
                xtype:'button',
                text : '上一天',
                handler : function() {      

            sTime_day=Ext.getCmp("queryTime").getValue();   
//这句话是因为在下面定义了一个queryTime文本框，储存当前的日期


    cDetailsAjax(city,facName,sTime_day,template,panel,-1);
                //因为多次调用ajax传递数据，单独写了一个function                           
                //city,facName,sTime_day这三个都是数据，没啥好说的
                //template，panel是上面定义的，-1是日期减一，毕竟上一天
                }
             },
             {
                xtype:'button',
                text : '下一天',
                handler : function() {  

    sTime_day=Ext.getCmp("queryTime").getValue();   
    cDetailsAjax(city,facName,sTime_day,template,panel,1);
                }
            },
            { 
                id:'queryTime', 
                name:'queryTime',
                //readonly:true,
                //不知道为啥不能只读，然后就设成不能点击算了
                disabled:true,
                xtype:'textfield',//文本框类型
                fieldLabel:'查询的日期是',
                labelWidth:80,
                width:150//这个宽度是标签和文本框一起的宽度，所以说实际上文本框只有70宽度
            } ,
            '->',//这个标签以后的代表会在最右边出现
            {
                xtype:'button',
                text : '确认',
                handler : function() {
                        win.close();
                }
            }]
    });
    cDetailsAjax(rawData.city,rawData.facName,sTime_day,template,panel,0);//这个是点击按钮出现当天数据

    win.show();//要写这个window才会出来
}

cDetailsAjax代码

function cDetailsAjax(city,facName,sTime_day,template,panel,temp){
    var loadMask = new Ext.LoadMask(document.body, {msg : '正在向服务器发送请求...'});
    loadMask.show();
    //Ext.Ajax.request没有form.submit的waitMsg:'正在操作,请稍后...' 属性，所以用这个loadMask 模拟
    Ext.Ajax.request({
         url: cDetailsURL,
         method: 'post',
         params: { city:city,facName:facName,sTime_day:sTime_day,temp:temp},
         success: function (response, options) {
                        loadMask.hide();//注意先关掉请求然后再显示数据
                        var responseJson = Ext.JSON.decode(response.responseText);
             //json传过来的数据像这样的{"rows":rows}，不知道的后台打印一下
                        if(responseJson.rows.length==0){
                            Ext.Msg.show({  
                                title:'提示',  
                                msg:'当天暂无数据',  
                                buttons:Ext.Msg.OK,  
                                icon:Ext.Msg.INFO  
                            });  
                            //挺好看的一个弹出框
                        }
                        template.overwrite(panel.body, responseJson.rows);//重写panel的body部分
                        var queryDate=responseJson.num+"";
                        Ext.getCmp("queryTime").setValue(queryDate);
              },//设置文本框的时间值，这里提一下一个奇葩事，我后台传过来时间2017-10-11
              //然后json帮我计算了，计算了。。。。1996，感动
             failure: function () {
                 loadMask.hide();
                 //就算是报错，也要先隐藏一下
                 Ext.Msg.show({  
                        title:'系统问题',  
                        msg:'请联系管理员',  
                        buttons:Ext.Msg.OK,  
                        icon:Ext.Msg.INFO  
                    }); 
             }
     });
}

上两张图

jsp里的隔行换色

.even { 
         background-color:#dfe8f6;   
      } 

.odd { 
         background-color:white ; 
     } 

后台代码

//在前端通过format转换了recDate
            String sTime_day = request.getParameter("sTime_day");
            //2017-11-10（也可能是20171110，前端接收时间没处理）
            String temp = request.getParameter("temp");
            String num = sTime_day.replaceAll("-", "");//去掉时间中的'-'
            int queryDate=Integer.parseInt(num)+Integer.parseInt(temp);//num是String类型，执行上一天下一天  ，要转格式
            num=String.valueOf(queryDate);  
            String eTime_day=String.valueOf(queryDate+1);
            //因为只查当天的，所以结束时间只要加1
            String city = URLDecoder.decode(request.getParameter("city"), "UTF-8");
            //前端传过来如果有中文需要转码，不然会乱码
            String facName = URLDecoder.decode(request.getParameter("facName"), "UTF-8");
            String retValue = "";
            List<StateEstimation> StateEstimation;
            String start_time=num.substring(0,4)+"-"+num.substring(4, 6)+"-"+num.substring(6, 8);
            //将20171110转变为2017-11-10
            String end_time =eTime_day.substring(0,4)+"-"+eTime_day.substring(4, 6)+"-"+eTime_day.substring(6, 8);


String retValue=null;
try {
                StateEstimation = StateService.getinfo(city,facName,start_time,end_time,num);//获取数据,放入json
                JSONObject jsonObject = new JSONObject();
                jsonObject.put("num", num);
                jsonObject.put("rows", StateEstimation);
                retValue = jsonObject.toString();
            } catch (Exception e) {
                e.printStackTrace();
                retValue = "{\"num\":"+num+""+",\"rows\":[]}";//没有返回这个
            }
            PrintWriter writer = response.getWriter();
            writer.write(retValue);
            writer.flush();
            writer.close();