自己最近项目需要做的，由于刚开始学ext，做的过程中有不少东西可以以后借鉴，
废话不多说，解释下功能，
主页面：
主页面URL路径：“/webapp/sjzl/jgck/jgck.jsp”。
选择法院：点击“选择法院”右侧的图标，弹出“法院单选页面”模式窗，当选择某一法院，点击“确定”按钮时，将选择的法院信息返填到查询条件对应区域并关闭模式窗，然后根据已选择的法院生成“承办部门”下拉列的选项并清空“承办人”下拉列的选项；如果点击“法院单选页面”的“取消”按钮，则关闭“法院单选页面”模式窗。
案件类型：下拉列，带空白选项，数据来源TS_AJFL表。
案号：模糊查询条件。
承办部门：下拉列，选项默认为空（即没有可选的选项），当已选择法院时重新生成下拉列选项。当选中其中一个承办部门时，清空“承办人”下拉列的选项，然后根据当前选择的承办部门生成该部门的承办人选项。数据来源BS_BM表。
承办人：下拉列，选项默认为空（即没有可选的选项），根据“承办部门”选中的值生成。数据来源BS_RY表。
【查询】按钮：点击“查询”按钮，获取当前的查询条件，“法院”为必选条件，未选择时提示用户选择，已选择则提交进行后续查询操作。
【导出】按钮：点击“导出”按钮，若用户未进行查询操作，则提示用户先做查询操作然后在点击“导出”按钮；已做“查询”操作则将当前结果列表导出Excel文件供用户下载。
主页面默认显示“结果列表”Tab页面。
“结果列表”Tab页面：
根据查询条件，从检查结果JC_JG表中获取列表数据。
“统计图表”Tab页面：
统计方式：单选按钮，选项包括“部门、案件类型、规则”，默认选中“部门”选项。改选时立即生效触发重新生成图表操作。
图表类型：单选按钮，选项包括“柱状图、折线图、饼图”，默认选中“柱状图“选项。改选时立即生效触发重新生成图表操作。
显示类型：单选按钮，即“显示前 n 个”和“显示全部”两个选项，“显示前 n 个”中“ n ”为文本框，只可填写正整数，n的默认值为“10”，当选中“显示前 n 个”这个选项时，文本框才可修改数字，修改显示数值完毕，按回车键触发生效重新生成图表操作,当选中“显示前 n 个”中n为空时，默认置10并立即生效触发重新生成图表操作；当选中“显示全部”选项时，置灰“显示前 n 个”选项中的文本框，并立即生效触发重新生成图表操作。
上图：具体代码就不解释了，次博文只为了以后借鉴，不具备教学性质
JS代码,重点说明下，对于charts的配置一定要配置charts.swf的url
| <%@ page language="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.*"%> <% response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setDateHeader("Expires", 0); String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; String now = new java.text.SimpleDateFormat("yyyy年MM月dd日").format(new Date()); %> <!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>检查结果查看</title> <styletype="text/css"> .icon-search { background-image:url(<%=basePath%>/ext/button/style/icons/search.gif) !important;
} .icon-excel { background-image: url(<%=basePath%>/ext/button/style/icons/excel.gif) !important;
} </style> <metahttp-equiv="pragma"content="no-cache"> <metahttp-equiv="cache-control"content="no-cache"> <metahttp-equiv="expires"content="0"> <scripttype="text/javascript"> var CUR_DATE = "<%=now%>";//当前日期 </script> <%@includefile="/ext/inc/ext-js3.jsp"%> <scripttype="text/javascript"src="../common/common.js"></script> <scripttype="text/javascript"src="../gzzx/extjs/SingleComboPanel.js"></script> <scripttype="text/javascript">
function onTreeNodeClick(node, isChecked) { if(node) { if(node.hasChildNodes()) { varb = node.childNodes; vara = b.length; for( vard = 0; d < a; d++) { if (isChecked) { if (b[d].attributes.checked ==false) { b[d].ui.toggleCheck(); } } else { if (b[d].attributes.checked ==true) { b[d].ui.toggleCheck(); } } } } } }; Ext.onReady(function() { vardeptStore=newExt.data.JsonStore({ url : CONTEXT_PATH+"/sjzlAction!getDept.sa", fields : ["BMCODE","BMMC" ], autoLoad :true }); varpersonStore=newExt.data.JsonStore({ url : CONTEXT_PATH+"/sjzlAction!getPerson.sa", fields : ["RYCODE","RYXM" ], autoLoad :true });; varajStore=newExt.data.JsonStore({ url : CONTEXT_PATH+"/sjzlAction!getAjType.sa", fields : ["AJCODE","AJMC" ], autoLoad :true }); /// var jgStore = newExt.data.JsonStore( {//定义数据集对象 autoDestroy:true, url : CONTEXT_PATH+"/sjzlAction!getJcjg.sa", fields : ['AH','CBBM','CBR','GZID','BH','MC'], id: 'jgStore', root:'root', //? totalProperty :"totalCount", baseParams:{ fy:"", lx:"", ah:"", cbbm:"", cbr:"" }
});
varcm = newExt.grid.ColumnModel( [//创建表格列模型 new Ext.grid.RowNumberer(), { header :"案号", dataIndex :'AH', sortable :true }, { header :"承办部门", dataIndex :'CBBM', sortable :true }, { header :"承办人", dataIndex :'CBR', sortable :true }, { header :"规则号", dataIndex :'GZID', sortable :true } , { header :"规则名称", dataIndex :'BH', sortable :true }, { header :"规则说明", dataIndex :'MC', sortable :true }]); //
// var jgGrid = newExt.grid.GridPanel( {//创建Grid表格组件 title:"查询列表", id:"jggrid", frame :true,//渲染表格面板 stripeRows :true,//显示斑马线 loadMask:{msg:"数据加载中，请稍等..."}, height:700, store : jgStore,//设置表格对应的数据集 bodyStyle:'width:100%', cm : cm, bbar :new Ext.PagingToolbar( { pageSize : 50, displayInfo :true, store : jgStore, displayMsg :'显示第{0}条到{1}条记录,一共{2}条记录', emptyMsg :'没有记录' }) }); /chart var picStore =new Ext.data.JsonStore({ id:"picStore", url : CONTEXT_PATH+"/sjzlAction!getPicture.sa", fields : ["name","amount" ], autoLoad :true });
// extra extra simple varcolumnPanel= newExt.Panel({ title:'柱状图显示', hidden:true, layout:'fit', id:"columncharts", width:'100%', height:600, items: { xtype:'columnchart', store:picStore, url:'<%=basePath%>ext/extjs3/resources/charts.swf', xField:'name', yField:'amount', listeners: { itemclick: function(o){ var rec = store.getAt(o.index); Ext.example.msg('Item Selected','You chose {0}.', rec.get('name')); } } } });
varlinePanel= newExt.Panel({ title:'折线图显示', layout:'fit', hidden:true, id:"linecharts", width:'100%', height:600, items: { xtype:'linechart', store:picStore, url:'<%=basePath%>ext/extjs3/resources/charts.swf', xField:'name', yField:'amount', listeners: { itemclick: function(o){ var rec = store.getAt(o.index); Ext.example.msg('Item Selected','You chose {0}.', rec.get('name')); } } } });
varpiePanel=newExt.Panel({ title: '饼图显示', width: '100%', id:"piecharts", hidden:true, height: 600, layout:'fit', items: { xtype:'piechart', store:picStore, categoryField:'name', url:'<%=basePath%>ext/extjs3/resources/charts.swf', dataField:'amount', extraStyle: { legend: { display:'bottom', padding: 5, font: { family :'Tahoma', size: 13 } } }, listeners: { itemclick:function(o) { var rec = store.getAt(o.index); Ext.example.msg('选择提示','你选择了-{0}.', rec.get('name')); } } } });
///
var tabPanelChild = new Ext.Panel({ id:"secchild", autoHeight:true, tbar :new Ext.Toolbar([{ xtype :"buttongroup", id:"tabpanel", columns:2, frame :false, items:[ { xtype : "label", html : "统计方式：" },{ xtype : "radiogroup", height:26, id : "tjfsRadio", listeners : { change:function(radiofield,oldvalue){ picture(); }
}, columns:3, name:"tjfs", allowBlank : false, items : [{ boxLabel : '部门', name : "tjfs", inputValue : 'bm', width : 10, checked : true },{ boxLabel : '案件类型', name : "tjfs", inputValue : 'ajlx', width : 10 },{ boxLabel : '规则', name : "tjfs", inputValue : 'gz', width : 10 }] },{ xtype : "label", html : "图标类型：" },{ xtype : "radiogroup", height:26, id : "tblxRadio", name:"tblx", listeners : { change:function(radiofield,oldvalue){ picture();
}}, allowBlank : false, items : [{ boxLabel : '柱状图', name : "tblx", inputValue : 'columnp', width : 50, checked : true },{ boxLabel : '折线图', name : "tblx", inputValue : 'linep', width : 50 },{ boxLabel : '饼图', name : "tblx", inputValue : 'piep', width : 50 }] },{ xtype : "label", html : "显示类型：" },{ xtype : "radiogroup", height:26, id : "xslxRadio", name:"xslx", allowBlank : false, items : [{ boxLabel : '显示前', name : "xslx", id:"xsq", inputValue : 'some', width : 50, checked : true, handler:function(){ if(this.getValue()){ Ext.getCmp("xsgs").enable(); }
} },{ xtype : "numberfield", id:"xsgs", allowNegative:false, allowDecimals:false, maxValue:20, width:1, listeners : { specialKey : function(field, e) { if (e.getKey() == Ext.EventObject.ENTER) {//响应回车 picture(); } } } },{ xtype : "label", html : "个" },{ boxLabel : '显示全部', name : "xslx", id:"xsqb", inputValue : 'all', width : 50, handler:function(){ if(this.getValue()){ Ext.getCmp("xsgs").disable(); picture();
}
}
}] }
] }
]), items:[columnPanel,linePanel,piePanel]
}); vartabPanel = newExt.TabPanel({ width:'100%', activeTab: 0, id:"tab", frame:false, height:Ext.getBody().getHeight()-10, items:[ {title:'结果列表',id:"firstChild",items:jgGrid}, { title:'统计图表',id:"secondChild",items:tabPanelChild,listeners: {activate:function(){
if(Ext.getCmp('jggrid').getStore().getTotalCount()==0){ Ext.Msg.alert('提示框','请先查询数据再绘制图表',function(){ Ext.getCmp('tab').setActiveTab(Ext.getCmp('firstChild')); }); }else{ //获取页面上的统计方式，图表类型，显示类型
picture(); } }}} ] });
functionpicture(){ try{ vartjfs=Ext.getCmp("tjfsRadio").getValue(); vartblx=Ext.getCmp("tblxRadio").getValue(); varbv = ""; if(Ext.getCmp("xsq").getValue()){ bv = "some"; }else if(Ext.getCmp("xsqb").getValue()){ bv="all"; } varxslx=bv; var xsgs=Ext.getCmp("xsgs").getValue(); varfy=Ext.getCmp('jcfyCombo').getValue(); varlx=Ext.getCmp('lxcombo').getValue(); varah=Ext.getCmp('ahtext').getValue(); varcbbm=Ext.getCmp('deptcombo').getValue(); varcbr=Ext.getCmp('personcombo').getValue(); picStore.load({ params:{ tjfs : tjfs, tblx : tblx, xslx : xslx, xsgs : xsgs, fy: fy, lx:lx, ah:ah, cbbm:cbbm, cbr:cbr } }); if(tblx=="columnp"){ Ext.getCmp("columncharts").show(); Ext.getCmp("piecharts").hide(); Ext.getCmp("linecharts").hide();
}else if(tblx=="piep"){ Ext.getCmp("columncharts").hide(); Ext.getCmp("piecharts").show(); Ext.getCmp("linecharts").hide();
}else if(tblx=="linep"){ Ext.getCmp("columncharts").hide(); Ext.getCmp("piecharts").hide(); Ext.getCmp("linecharts").show(); }
}catch(e){
}
}
varfyTree = newExt.tree.TreePanel({ region :"center", xtype :"treepanel", autoScroll :true, width : 240, height : 380, id : "fyTree", layout :"fit", border :false, loader :new Ext.tree.TreeLoader({ dataUrl : CONTEXT_PATH +"/sjzlAction!queryFyTree.sa?checked=false", clearOnLoad :true }), root : new Ext.tree.AsyncTreeNode({ id :"-1", text :"顶层" }), rootVisible :false, listeners : { checkchange : onTreeNodeClick, click:function(node){ if(node.leaf){ Ext.getCmp('jcfyCombo').setValue({ id : node.id, text : node.text }); Ext.getCmp('jcfyCombo').collapse(); //动态的给加载承办部门,但要先清空 deptStore.removeAll() ; personStore.removeAll() ; Ext.getCmp('personcombo').setValue(""); Ext.getCmp('personcombo').setRawValue(""); Ext.getCmp('deptcombo').setValue(""); Ext.getCmp('deptcombo').setRawValue(""); deptStore.load({ params:{ dwdm : node.id } })
}
} }
}); varfyPanel = newExt.Panel({ padding :"10 10 10 10", layout :"border", items : [ fyTree ] });
varmainPanel = newExt.Panel({ // layout : "border", tbar :new Ext.Toolbar([{ xtype :"buttongroup", id:"mypanel", padding :"0 10 0 0", columns : 6, frame :false, defaults : { scale : "small" }, items:[{ xtype:"label", colspan:1, html:"选择法院：" },{ colspan : 3, id : "jcfyCombo", name : "jcfy", xtype : "singlecombopanel", width : 300, listWidth : 300, border : false, frame : false, allowBlank : false, enableTbar : true, emptyText:'请选择检查法院', clearValue : function() { Ext.ux.SingleComboPanel.superclass.clearValue.call(this); this.collapse(); //同时清除承办部门和承办人 deptStore.removeAll() ; personStore.removeAll() ; Ext.getCmp('personcombo').setValue(""); Ext.getCmp('personcombo').setRawValue(""); Ext.getCmp('deptcombo').setValue(""); Ext.getCmp('deptcombo').setRawValue(""); }, panel : { xtype : "panel", height : 400, width : 300, frame : false, id : "fyCard", layout : "card", activeItem : 0, items : [ fyPanel ] } }, { xtype : "label", colspan : 2
},//第二行 { xtype :"label", html:"案件类型：" },{ xtype : "combo", width:150, store:ajStore, emptyText:'请选择案件类型', forceSelection : true, valueField : "AJCODE", displayField : "AJMC", triggerAction : "all", id:"lxcombo", mode : "local", editable : false },{xtype : "label", html:"案号：" },{ xtype : "textfield", id:"ahtext", emptyText:'请填写案号', width:100 },{ xtype : "label", colspan : 2
},{ xtype :"label", html:"承办部门：" },{ xtype : "combo", id:"deptcombo", width:150, store : deptStore, emptyText:'请选择承办部门', valueField : "BMCODE", triggerAction : "all", mode : "local", displayField : "BMMC", forceSelection : true, editable : false, listeners:{'select':function(){//点击立即失去焦点 this.fireEvent('blur'); //动态加载承办人 personStore.load({ params:{ yhbm : this.value } }) /
}}
},{ xtype :"label", html:"承办人：" },{ xtype : "combo", id:"personcombo", width:100, emptyText:'请选择承办人' , store:personStore, forceSelection : true, valueField : "RYCODE", triggerAction : "all", displayField : "RYXM", mode : "local", editable : false }, { xtype : "button", iconCls:'icon-search', text:"查询", handler:function(){ //校验法院为必选项 if(Ext.getCmp('jcfyCombo').getValue()==""||Ext.getCmp('jcfyCombo').getValue()==null){ Ext.Msg.alert('提示框','法院为必选查询项',function(){ Ext.getCmp("jcfyCombo").focus();
});
}else{//执行查询 jgStore.baseParams.fy = Ext.getCmp('jcfyCombo').getValue(); jgStore.baseParams.lx = Ext.getCmp('lxcombo').getValue(); jgStore.baseParams.ah = Ext.getCmp('ahtext').getValue(); jgStore.baseParams.cbbm = Ext.getCmp('deptcombo').getValue(); jgStore.baseParams.cbr = Ext.getCmp('personcombo').getValue(); jgStore.load({ params : { start : 0, limit : 50
} });
}
} }, { xtype : "button", text:"导出", iconCls:'icon-excel', handler:function(){ //先校验store中有没有数据结果 if(jgStore.getTotalCount()==0){ Ext.Msg.alert('提示框','请先查询数据再导出'); }else{ //执行导出操作 var appWindow = window.open(CONTEXT_PATH+"/sjzlAction!getJcjgExcel.sa?fy="+Ext.getCmp('jcfyCombo').getValue()+"&lx="+Ext.getCmp('lxcombo').getValue()+"&ah="+Ext.getCmp('ahtext').getValue()+"&cbbm="+Ext.getCmp('deptcombo').getValue()+"&cbr="+Ext.getCmp('personcombo').getValue()); //调action得到数据生成execl格式的数据，response发往前台 appWindow.focus();
}
} }]
}]), items : [ tabPanel ] });
newExt.Viewport({ layout:'fit', items:[ mainPanel ] });
})
</script>
</head> <body><br><br></body> </html> |
excel导出后台代码，要引进第三方jar包JXL.JAR
| publicvoid getJcjgExcel()throws IOException{ String fy = StringUtils.trim(request.getParameter("fy"));// String lx = StringUtils.trim(request.getParameter("lx"));// String ah = StringUtils.trim(request.getParameter("ah"));// String cbbm = StringUtils.trim(request.getParameter("cbbm"));// String cbr = StringUtils.trim(request.getParameter("cbr"));// List<Map<String,Object>> list=sjzlService.queryJcjgAll(fy, lx, ah, cbbm, cbr); String[] heads = {"案号","承办部门","承办人","规则号","规则名称","规则说明"}; try{
OutputStream os = response.getOutputStream(); WritableWorkbook wbook = Workbook.createWorkbook(os); WritableSheet wsheet = wbook.createSheet("检查结果", 0); for(int i=0 ; i<heads.length ; i++) { Label label =new Label(i,0 ,heads[i]); wsheet.addCell(label); } if(list!=null && list.size()>0){ int i = 1; for(Map<String,Object> tmap : list){ //这里需要注意的是，在Excel中，第一个参数表示列，第二个表示行 wsheet.addCell(new Label(0, i,(String)tmap.get("AH"))); wsheet.addCell(new Label(1, i,(String)tmap.get("CBBM"))); wsheet.addCell(new Label(2, i,(String)tmap.get("CBR"))); wsheet.addCell(new Label(3, i,(String)tmap.get("GZID"))); wsheet.addCell(new Label(4, i,(String)tmap.get("BH"))); wsheet.addCell(new Label(5, i,(String)tmap.get("MC"))); i++; } } response.setHeader("Content-disposition","attachment;" + "filename="+new String("结果导出".getBytes("GBK"),"ISO_8859_1") +".xls"); response.setContentType("application/vnd.ms-excel"); wbook.write(); wbook.close(); os.close(); }catch(Exception e){ e.printStackTrace(); }
} |
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
