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 : '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>
原文地址:https://www.cnblogs.com/dyfh/p/2589814.html