Ext3.2弹出窗囗查询分页显示后台数据列表
需要用Ext做一个查询选择病人信息的弹出窗囗，并将选择的病人名称返回到前一页面，后又加入查询结果分页及显示复选框，代码如下：
使用的Ext版本为3.2
前台代码：
var desobj; function selectSick(obj) desobj = obj;{//obj是打开弹出窗囗的页面的对象，用以回显本窗囗选择的数据 selectSickWindow.show();//弹出窗囗 } Ext.onReady(function() { docstore.load(); ds.load({params:{ start : 0,//查询的起始位置 limit : 10//每次查询的数量，应与PagingToolbar的PageSize值相同 }}); }) var docstore = new Ext.data.Store({// 下拉框的数据源 proxy : new Ext.data.HttpProxy({ url : 'queryDoctorData.jsp' }), reader : new Ext.data.JsonReader({ totalProperty : 'totalProperty', root : 'root' }, [{ name : 'queryDoctorId', mapping : 'queryDoctorId' }, { name : 'queryDoctorName', mapping : 'queryDoctorName' }]), remoteSort : false }); var queryform = new Ext.form.FormPanel({ id : 'queryform', header : false, frame : true, hideBorders : false, height : 40, buttonAlign : 'center', items : [{ // 行1 layout : "column", // 从左往右的布局 items : [{ columnWidth : .35, // 该列在整行中所占百分比 layout : "form", // 从上往下的布局 labelWidth : 60, items : [{ xtype : "textfield", fieldLabel : "病人姓名", name : 'querySickName', id : 'querySickName', width : 120 }] }, { columnWidth : .35, layout : "form", labelWidth : 60, items : [{ xtype : "combo",// 下拉框 fieldLabel : "所属医生", id : 'doctorCombo', name : 'doctorCombo', mode : 'local', triggerAction : 'all', store : docstore, typeAhead : true, hiddenName : 'queryDoctorId', displayField : 'queryDoctorName', valueField : 'queryDoctorName', selectOnFocus : true, editable : false, width : 120 }] }, { columnWidth : .15, layout : "form", items : [{ xtype : "button", text : "查询", width : 80, handler : function() {// 根据条件重新查询数据 var querySickName = Ext .getCmp("querySickName").getValue(); // var queryDoctorName = // Ext.get('queryDoctorId').dom.value; var queryDoctorName = Ext .getCmp("doctorCombo") .getRawValue(); ds.reload({ params : { start : 0, limit : 10, sickname : querySickName, doctorname : queryDoctorName } }); } }] }, { columnWidth : .15, layout : "form", items : [{ xtype : "button", text : "重置", width : 80, handler : function() { Ext.getCmp('queryform').form .reset(); } }] }] }] }) var bottomform = new Ext.form.FormPanel({ id : 'bottomform', header : false, frame : true, hideBorders : false, height : 55, buttonAlign : 'center', items : [{ // 行1 layout : "column", // 从左往右的布局 items : [new Ext.Panel({ layout : 'table', buttonAlign : 'center', buttons : [{ text : '确 定', handler : function() { var selModel = sickInfoGrid .getSelectionModel(); if (selModel.hasSelection()) { desobj.value = selModel.getSelected() .get("sickname");//将选中的病人名称回示到前一个页面的obj对象上 selectSickWindow.hide();//隐藏弹出窗囗 } else { Ext.Msg.alert("提示", "请选择一条记录"); } } }, { text : '关 闭', handler : function() { selectSickWindow.hide(); } }] }) ] }] }) var sm = new Ext.grid.CheckboxSelectionModel();// 复选按钮 var cm = new Ext.grid.ColumnModel([sm, {// GridPanel列定义 header : '序号', dataIndex : 'rownum', width : 20, sortable : true },{ header : '病人姓名', dataIndex : 'sickname', width : 200, sortable : true }, { header : '病历编码', dataIndex : 'dtcode', width : 200, sortable : true, id : 'expand' }, { header : '所属医生', dataIndex : 'doctorname', width : 200, sortable : true }]); cm.defaultSortable = true; // 排序 var ds = new Ext.data.Store({// GridPanel的数据源 proxy : new Ext.data.HttpProxy({ url : 'querySickData.jsp' }), reader : new Ext.data.JsonReader({ totalProperty : 'totalProperty', root : 'root' }, [{ name : 'rownum', mapping : 'rownum' },{ name : 'sickname', mapping : 'sickname' }, { name : 'doctorname', mapping : 'doctorname' }, { name : 'dtcode', mapping : 'dtcode' }]), remoteSort : false }); var sickInfoGrid = new Ext.grid.GridPanel({// GridPanel查询结果展现区 // title:'病人信息', margins : '0', split : true, trackMouseOver : false, store : ds,// Grid数据源 loadMask : { msg : '正在加载数据，请稍侯……' }, autoWidth : true, bodyStyle : 'width:100%', // sm : sm,// GridPanel中的复选按钮,可以全选所有的行,若没有设置该属性,则GridPanel得全选功能不能实现 cm : cm, // 选择模式 selModel : new Ext.grid.RowSelectionModel({ singleSelect : true // 只可单选 }), // 分页栏 bbar : new Ext.PagingToolbar({ pageSize : 10, store : ds, displayInfo : true, emptyMsg : "没有记录" }), autoExpandColumn : 'expand', region : 'center', height : 275 }); selectSickWindow = new Ext.Window({ title : '选择病人', resizable : false, height : 400, width : 600, modal : true, autoDestroy : true, closeAction : 'hide', modal : true, items : [queryform, sickInfoGrid, bottomform] });
取数据的JSP代码：
querySickData.jsp <%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.util.List"%> <%@ page import="java.util.Map"%> <%@ page import="java.util.HashMap"%> <%@ page import="java.util.ArrayList"%> <%@ page import="net.sf.json.JSONArray"%> <%@ page import="my.com.util.DBService"%> <% String start = request.getParameter("start"); if (start==null) start = "0"; String limit = request.getParameter("limit"); if (limit==null) limit = "10"; int pagestart = Integer.parseInt(start); int pageend = Integer.parseInt(start)+Integer.parseInt(limit); String doctorname = request.getParameter("doctorname"); String sickname = request.getParameter("sickname"); if (doctorname==null)doctorname = ""; if (sickname==null)sickname = ""; List<Map<String, Object>> list = new ArrayList<Map<String, Object>>(); String sqlString = "s.sickname,s.dtcode,IsNull(d.fullname,'') fullname from sickinfo s LEFT JOIN doctorinfo d on s.doctorid=d.id and d.delflag=0 and d.isdoctor=1 where 1=1 "; if (!sickname.trim().equalsIgnoreCase("")){ sqlString = sqlString+" and s.sickname like '%"+sickname+"%'"; } if (!doctorname.trim().equalsIgnoreCase("")){ sqlString = sqlString+" and d.fullname = '"+doctorname+"'"; } sqlString = "SELECT ROW,sickname,dtcode,IsNull(fullname,'') fullname From (SELECT ROW_NUMBER() OVER (ORDER BY s.id) AS ROW, "+sqlString + ") as ProductsWithRowNumbers"; try { List<Map<String,String>> sickList = new DBService().query(sqlString); Map<String,String> tmpMap = null; Map<String, Object> map = null; if (pageend>sickList.size())pageend=sickList.size(); for (int i = pagestart; i < pageend; i++) { tmpMap = sickList.get(i); map = new HashMap<String, Object>(); map.put("rownum", tmpMap.get("ROW")); map.put("sickname", tmpMap.get("sickname")); map.put("doctorname", tmpMap.get("fullname")); map.put("dtcode", tmpMap.get("dtcode")); list.add(map); } //System.out.println("{totalProperty:"+sickList.size()+",root:"+JSONArray.fromObject(list)+"}"); out.println("{totalProperty:"+sickList.size()+",root:"+JSONArray.fromObject(list)+"}"); } catch (Exception err) { err.printStackTrace(); } %>
queryDoctorData.jsp大同小异，略
前一页面的调用弹出窗囗的JS代码：
<script type="text/javascript"> function openSelectSick(){ selectSick(document.getElementById('sickNameResult')); } </script>