`

列表形式表单面板的设计

阅读更多

列表形式表单面板的设计

 

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

 



 

 

  • 大小: 9.1 KB
分享到:
评论

相关推荐

    laravel-admin Form表单多功能列表组件MultiList.rar

    这个自定义插件是专为`laravel-admin`设计的,旨在提供一种创新的方式,将传统的`grid`表格样式与`form`表单控件相结合,创建出一个列表形式的表单界面,提升用户在数据管理和编辑时的体验。 `laravel-admin`是一个...

    JSON数据可视化-JSON模式,以表单的形式编辑JSON模式。可用于在线组件设计的配置面板_JSON模式编辑器.zip

    JSON数据可视化-JSON模式,以表单的形式编辑JSON模式。可用于在线组件设计的配置面板_JSON模式编辑器

    FineReport怎么进行表单设计.docx

    将这些组件拖放到表单上,可以先选择将它们放在参数面板组件内,以保持布局整洁。 对于参数组件,从工具栏拖动它到表单主体,并将下拉框、文本框和标签控件放入参数组件中。设置标签的控件值,确保“订单ID”和...

    JEECG Online表单开发指南v3.7

    单表类型表单是最基本的表单形式,适用于处理单一记录的情况。以下是如何创建单表类型表单的步骤: 1. **创建数据表单**: 首先需要通过在线设计器创建表单,指定表单的基本信息和字段配置。 2. **同步数据库**: ...

    计算机表单的使用PPT学习教案.pptx

    表单作为网页设计中不可或缺的元素,扮演着收集用户信息和数据的角色,是实现用户与网页间有效互动的重要工具。无论是在留言簿、在线投票、会员注册、登录认证,还是在在线购物的结算页面,表单都是不可或缺的组件。...

    C#编写的属性面板 源码

    属性面板的基本工作原理是将对象的属性以树形结构或表单形式展现出来,每个节点对应一个属性,用户可以通过界面直接修改这些属性的值。C#中的`PropertyGrid`控件是.NET Framework提供的一种内置方式,用于创建这种...

    Dreamweaver CS6设置表单元素的属性1.pdf

    在网页设计与开发中,表单元素的创建与属性设置是实现用户交互的核心技术之一。随着技术的发展,Dreamweaver CS6作为一款功能强大的网页设计软件,提供了丰富的工具和选项,以帮助设计者在构建表单时能够更精确、更...

    dreamweaver 表单

    6. **列表和菜单(List/Menu)**:下拉菜单形式的选择项,可预设多个选项供用户选择。 7. **图像域(Image Field)**:通过上传图片作为表单的一部分,常用于头像上传等功能。 8. **表单按钮(Form Button)**:包括...

    网页制作项目使用表单制作注册网页PPT学习教案.pptx

    - **列表/菜单**:根据需要,可以设置为菜单或列表形式。菜单只显示一个选择项,列表则可选中多个项,通过【高度】和【选定范围】选项控制显示和选择行为。 - **复选框**:复选框用于多选,其【选定值】很重要,...

    Moss开发SharePoint网站开发表单示例

    此外,Infopath表单还可以嵌入到Web应用程序中的aspx页面,通过XMLFormView ASP.NET控件展示,或者在Windows应用程序中以ActiveX形式嵌入。 对于.NET开发者来说,Infopath 2007提供了完全托管的(CLR 2.0)环境,...

    joomla中的一个做表单的插件jforms

    在Joomla的后台管理面板中,管理员可以管理jforms的设置,创建、编辑和管理表单,查看提交的表单数据,以及配置邮件通知等相关选项。 7. **安装与使用:** 要在Joomla网站上启用jforms,你需要将压缩包上传至...

    用Dreamweaver做搜索表单

    - 使用自定义函数`ShowBold()`来替换关键词,使其以红色加粗的形式显示。 #### 六、总结 通过以上步骤,我们可以成功地在Dreamweaver MX 2004中创建一个功能完善的ASP搜索表单。这个表单不仅能够接收用户的搜索...

    常见UI设计模式.pdf

    - **设计要点**:良好的表单设计应该简洁明了,易于填写,并能够有效减少用户出错的机会。 ##### 6. 调色盘/画布(Palette/Canvas) - **概念**:主要用于图形设计领域,如设计流程图、页面布局等。 - **应用场景**:...

    个人主页设计文档 网页设计 网页

    3. Flash MX动画制作:学生将熟悉Flash MX的绘图工具、帧、层和属性面板,学会制作简单的动画,并设计出网页上的Flash标题,提升网页的视觉吸引力。 4. WEB数据库应用:课程深入讲解了B/S(浏览器/服务器)模式下...

    原型设计工具Axure入门文档,Axure Web组件库

    这里提供的Axure Web组件库,包含了常见的Web界面元素,如导航条、表单组件、图标等,可以直接拖放到你的设计中,减少手动绘制的时间。 在原型完成后,Axure可以生成HTML预览文件,供团队成员或客户进行查看和反馈...

    网页设计(考试参考答案).pdf

    网页设计的交互主要指网页的交互效果,包括超链接、表单、动画、FLASH等方面。网页的交互设计需要考虑到用户的交互需求和行为,尽量提高网页的交互性和可用性。 Dreamweaver 是一个流行的网页设计工具,它提供了...

    Dreamweaver网页设计.ppt

    本章主要涵盖了利用Dreamweaver CS3进行网页设计的核心内容,包括建立网站、表格排版、超级链接的创建、CSS样式的应用、模板的运用、框架网页的构建以及信息表单的设计。 首先,建立网站是整个设计流程的起点。...

    moban4619_前端设计师个人主页模板_

    - 技能图谱:用图表形式展示设计师的专业技能水平。 - 教育与经历:列出设计师的学历和工作经历。 - 联系表单/邮件链接:让潜在雇主或客户能够方便地联系设计师。 - 社交媒体链接:展示设计师在LinkedIn、GitHub等...

    axure简易设计2

    动态面板可以用来创建可交互的表单,按钮则负责触发相应的操作,例如,添加新数据时,用户点击“添加”按钮,Axure可以通过自定义脚本将数据添加到列表中。 其次,统计功能涉及到数据的汇总和分析。Axure虽然不擅长...

    axure后台管理系统通用模板.zip

    包含了一个名为“axure后台管理系统通用模板.rp”的文件,这是一份完整的Axure原型模板,专门针对后台管理系统设计,有助于设计师和开发人员快速构建出具有登录、导航、列表和表单等功能的界面原型。 1. **Axure RP...

Global site tag (gtag.js) - Google Analytics