前言
这两天用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();