列表形式表单面板的设计

列表形式表单面板的设计

 

1.表单：注意column布局和form布局的结合使用

/*-----1.创建表单-----*/
var basicMsgForm = new Ext.form.FormPanel({
	width : 550,
	autoHeight : true,
	frame : true,
	layout : "form", // 整个大的表单是form布局
	buttonAlign : "center",
	labelAlign:"right",
	labelWidth : 80,
	items : [{ // 行1
		layout : "column", // 从左往右的布局
		items : [{
			columnWidth : .34, // 该列有整行中所占百分比
			layout : "form", // 从上往下的布局
			items : [{
				name:"xmfzr",
				xtype : "textfield",
				fieldLabel : "项目负责人",
				width : 90
			},{
				id:"basicId",
				name:"id",
				xtype:"textfield",
				fieldLabel:"编号",
				hidden:true,
				hideLabel:true
			},{
				id:"basicXmid",
				name:"xmid",
				xtype:"textfield",
				fieldLabel:"项目编号",
				hidden:true,
				hideLabel:true
			}]
		}, {
			columnWidth : .33,
			layout : "form",
			items : [{
				name:"tel",
				xtype : "textfield",
				fieldLabel : "联系方式",
				width : 90
			}]
		},{
			columnWidth : .3,
			layout : "form",
			items : [{
				name:"yzbm",
				xtype : "textfield",
				fieldLabel : "邮政编码",
				width : 60
			}]
		}]
	}, {	// 行2
		layout : "column",
		items : [{
			layout : "form",
			items : [{
				name:"addr",
				xtype : "textfield",
				fieldLabel : "联系地址",
				width : 420
			}]
		}]
	}, {// 行3
		layout : "column",
		items : [{
			layout:"form",
			columnWidth:.5,
			items:[{
				name:"start_date",
				xtype:"datefield",
				fieldLabel:"项目开始时间",
				readOnly :true,
	            format : 'Y-m-d',
				width:150
			}]
		},{
			layout:"form",
			columnWidth:.5,
			items:[{
				name:"end_date",
				xtype:"datefield",
				fieldLabel:"项目结束时间",
				readOnly:true,
				format:"Y-m-d",
				width:150
			}]
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"plan_fund",
				xtype : "textfield",
				fieldLabel : "计划安排资金",
				width : 150
				}]
		}, {
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"actual_fund",
				xtype : "textfield",
				fieldLabel : "实际到位资金",
				width : 150
			}]
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"central_pfund",
				xtype : "textfield",
				fieldLabel : "中央财政",
				width : 150
				}]
		}, {
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"central_afund",
				xtype : "textfield",
				fieldLabel : "中央财政",
				width : 150
			}]
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"province_pfund",
				xtype : "textfield",
				fieldLabel : "省财政",
				width : 150
				}]
		}, {
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"province_afund",
				xtype : "textfield",
				fieldLabel : "省财政",
				width : 150
			}]
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"county_pfund",
				xtype : "textfield",
				fieldLabel : "县财政",
				width : 150
				}]
		}, {
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"county_afund",
				xtype : "textfield",
				fieldLabel : "县财政",
				width : 150
			}]
		}]
	}, {// 行4
		layout : "column",
		items : [{
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"other_pfund",
				xtype : "textfield",
				fieldLabel : "其他",
				width : 150
				}]
		}, {
			layout : "form",
			columnWidth : .5,
			items : [{
				name:"other_afund",
				xtype : "textfield",
				fieldLabel : "其他",
				width : 150
			}]
		}]
	},{
		layout:"column",
		items:[{
			layout:"form",
			columnWidth : .5,
			items:[{
				name:"actual_cost",
				xtype:"textfield",
				fieldLabel:"实际支出",
				width:150
			}]
		},{
			layout:"form",
			columnWidth : .5,
			items:[{
				xtype:"textfield",
				fieldLabel:"【单位】",
				value:"(  万元  )",
				width:150,
				style:"background:none;border:0px;color:blue;font-weight:bold;",
				labelStyle:"color:blue;font-weight:bold;"
			}]
		}]
	}],
	buttons : [{
		text : "确认",
		handler:function(){
			var thisForm = basicMsgForm.getForm();
			if(thisForm.isValid()){
				var submitValues = thisForm.getValues();
                //提交表单
                thisForm.submit({
                	url:"insertBasicInfo.eva?doType=insertBasicInfo",
                	method:"POST",
                	waitMsg:"保存中，请稍后...",
                	params:submitValues,
                	success:function(){
                		Ext.Msg.alert('成功', "更新项目绩效基本情况成功！");
			            basicStore.reload();
                	},
                	failure:function(form,action){
                		Ext.Msg.alert('失败', "保存项目绩效基本情况失败！");
                	}
                });
			}
		}
	},{
		text:"取消",
		handler:function(){
			basicMsgWin.hide();
		}
	}]
});

 

 

2.窗口：

/*-----2.创建窗口-----*/
 var basicMsgWin = new Ext.Window({
 	title:"项目基本情况",
 	layout:"fit",
 	closeAction:"hide",
 	modal:true,
 	items:basicMsgForm
 });

 

 

 

3.Store:

var basicStore = new Ext.data.JsonStore({
	url:"getBasicInfo.eva?doType=getBasicInfo",
	root:"data",
	fields:["id","xmid","xmfzr","tel","addr","yzbm","startDate","endDate",
	"planFund","actualFund","centralPfund","centralAfund","provincePfund",
	"provinceAfund","countyPfund","countyAfund","otherPfund","otherAfund",
	"actualCost"]
});
//加载结束后执行，把Store的值赋给Form表单
basicStore.on("load",function(){
	var basicForm = basicMsgForm.getForm();
	var basicRecords = basicStore.data;     //获取Records记录
	var basicData = basicRecords.get(0);    //获取某一行的Record的Data数据
	basicForm.findField("id").setValue(basicData.get("id"));
	basicForm.findField("xmid").setValue(basicData.get("xmid"));
	basicForm.findField("xmfzr").setValue(basicData.get("xmfzr"));
	basicForm.findField("tel").setValue(basicData.get("tel"));
	basicForm.findField("yzbm").setValue(basicData.get("yzbm"));
	basicForm.findField("addr").setValue(basicData.get("addr"));
	basicForm.findField("start_date").setValue(basicData.get("startDate"));
	basicForm.findField("end_date").setValue(basicData.get("endDate"));
	basicForm.findField("plan_fund").setValue(basicData.get("planFund"));
	basicForm.findField("actual_fund").setValue(basicData.get("actualFund"));
	basicForm.findField("central_pfund").setValue(basicData.get("centralPfund"));
	basicForm.findField("central_afund").setValue(basicData.get("centralAfund"));
	basicForm.findField("province_pfund").setValue(basicData.get("provincePfund"));
	basicForm.findField("province_afund").setValue(basicData.get("provinceAfund"));
	basicForm.findField("county_pfund").setValue(basicData.get("countyPfund"));
	basicForm.findField("county_afund").setValue(basicData.get("countyAfund"));
	basicForm.findField("other_pfund").setValue(basicData.get("otherPfund"));
	basicForm.findField("other_afund").setValue(basicData.get("otherAfund"));
	basicForm.findField("actual_cost").setValue(basicData.get("actualCost"));
});

 

 

注意在点击弹框时传递需要的ID：

......
<button class='btn1' onclick='showCostWin("+record.get("xmid")+")'>查看</button>
......

//显示收支明细窗口
function showCostWin(xmid){
	Ext.getCmp("costXmid").setValue(xmid);//传递ID
	costWin.show();
	costStore.baseParams.xmid = xmid;
	costStore.load();
}

 

 

 

4.实体类：

public class ProjectBasicInfo {
	private int id;
	private int xmid;
	private String xmfzr;
	private String tel;
	private String addr;
	private String yzbm;
	private Date startDate;
	private Date endDate;
	private String planFund;
	private String actualFund;
	private String centralPfund;
	private String centralAfund;
	private String provincePfund;
	private String provinceAfund;
	private String countyPfund;
	private String countyAfund;
	private String otherPfund;
	private String otherAfund;
	private String actualCost;
。。。。。。set/get方法省略
｝

 

5.插入数据的Servlet：（注意日期格式的转换，必须为YYYY-mm-dd才行）

ProjectBasicInfoDao dao = new ProjectBasicInfoDao();
ProjectBasicInfo basicInfo = new ProjectBasicInfo();
String id = request.getParameter("id");
if(id != null && !id.equals("")){
	basicInfo.setId(Integer.valueOf(id));
}
basicInfo.setXmid(Integer.valueOf(request.getParameter("xmid")));
basicInfo.setXmfzr(request.getParameter("xmfzr"));
basicInfo.setTel(request.getParameter("tel"));
basicInfo.setYzbm(request.getParameter("yzbm"));
basicInfo.setAddr(request.getParameter("addr"));
String startDate = request.getParameter("start_date");
String endDate = request.getParameter("end_date");
if(startDate != null && !startDate.equals("")){
	basicInfo.setStartDate(Date.valueOf(startDate));
}
if (endDate != null && !endDate.equals("")) {
	basicInfo.setEndDate(Date.valueOf(endDate));
}
basicInfo.setPlanFund(request.getParameter("plan_fund"));
basicInfo.setActualFund(request.getParameter("actual_fund"));
basicInfo.setCentralPfund(request.getParameter("central_pfund"));
basicInfo.setCentralAfund(request.getParameter("central_afund"));
basicInfo.setProvincePfund(request.getParameter("province_pfund"));
basicInfo.setProvinceAfund(request.getParameter("province_afund"));
basicInfo.setCountyPfund(request.getParameter("county_pfund"));
basicInfo.setCountyAfund(request.getParameter("county_afund"));
basicInfo.setOtherPfund(request.getParameter("other_pfund"));
basicInfo.setOtherAfund(request.getParameter("other_afund"));
basicInfo.setActualCost(request.getParameter("actual_cost"));
dao.addProjectBadicInfo(basicInfo);

 

6.Hibernate插入或更新数据方法：

/**
 * 插入或更新项目基本信息
 * @param projectBasicInfo
 */
public void addProjectBadicInfo(ProjectBasicInfo projectBasicInfo) {
	Session s = null;
	try {
		s = HibernateUtil.getSession();
		s.beginTransaction();
		s.saveOrUpdate(projectBasicInfo);
		s.getTransaction().commit();
	} catch (Throwable e) {
		logger.error(e.toString());
		HibernateUtil.endSession(s);
	} finally {
		HibernateUtil.endSession(s);
	}
}

 

 

7.后台获取Store数据的代码：

查看另一篇博文：http://zyjustin9.iteye.com/admin/blogs/2121569