Extjs在form展示后台单个对象的属性
目的:
写一个按钮事件,点击时弹出一个win窗体,里面镶嵌form表单,并且展示后台单个对象的属性

先来后台:
public void find(){
String clientId = request.getParameter("clientId");
BusinessContract bc = businessContractService.getLastContract(clientId);
response.setContentType("text/html;charset=UTF-8");
JSONObject json = JSONObject.fromObject(bc);
ajaxWrite("{bc:["+json.toString()+"]}");
}
前台代码:
win 和form放在一起
text:'客户合同上传',
scope:this,
handler: function(item, event){
var record=this.getSelectionModel().getSelected();
if(!record){
Ext.MessageBox.alert('提示', '请选择客户信息!');
return;
}
var clientId=record.id;
var adr = '************'; //form表单提交路径
var findadr="*****************";//form表单数据来源
var company =record.data.bi_name;//来源于选中行的数据
var uploadForm=new Ext.form.FormPanel({//按照顺序,先创建一个form表单
width:600,
baseCls: 'x-plain',
frame:true,
layout: 'form',
fileUpload: true,//文件上传必须添加该属性,(PS:此处出现问题,添加该属性之后返回值里action.result为空,去掉则正常,暂时没解决)
autoHeight:true,
labelWidth:90,
defaults:{
anchor: '95%',
allowBlank: false
},
renderTo: Ext.getBody(),
reader: new Ext.data.JsonReader({//此处动态加载数据的属性获取
root: 'bc' //取值对象
},
[ //对象里面的字段
'contractType',
'companyAddress','companyName','companyPhone','taxNum','bankName',
'bankNum','financer',
{name:'taxpayerFile1',convert :function(v,record){ //这里是上传文件的路径,本来是服务器路径,这里就不予展示,直接提示是否上传过
if(v){
return '已经上传';
}else{
return '暂无文件';
};
}},
{name:'taxpayerFile2',convert :function(v,record){
if(v){
return '已经上传';
}else{
return '暂无文件';
};
}},{name:'docmentFile',convert:function(v,record){
if(v){
return '已经上传';
}else{
return '暂无文件';
};}
},
{name:'sdate',type:"date",mapping:'sdate.time',convert :function(v,record){ //日期字段,此处接受的字段格式:"edate":{"date":9,"day":5,"hours":0,"minutes":0,"month":5,"nanos":0,"seconds":0,"time":149693 // 7600000,"timezoneOffset":-480,"year":117} 所以只能对格式加以控制
return Ext.util.Format.date(new Date(v),'Y-m-d');
}},
{name:'edate',type:"date",mapping:'edate.time',convert :function(v,record){
return Ext.util.Format.date(new Date(v),'Y-m-d');
}},
'paymentDays'
,'amount','saler','content'
]),
items:[{
fieldLabel:'当前客户',
xtype : 'tbtext',
text:'<b>'+company+'</b>',
valueField :clientId,
name :'compnay'
},{
fieldLabel:'合同类型',
xtype:'attrCombo',
displayField:'name',
valueField :'name',
editable:false,
url:'/cs/customer/cct_find.ftl',
name:'contractType'
},{
name:'companyName',
xtype:'textfield',
allowBlank:false,
fieldLabel: '甲方全称*'
},{
name:'companyAddress',
xtype:'textfield',
fieldLabel: '甲方地址',
allowBlank:true,
},{
name:'companyPhone',
xtype:'textfield',
allowBlank:true,
fieldLabel: '甲方电话'
},{
name:'taxNum',
xtype:'textfield',
fieldLabel: '甲方税号',
allowBlank:true,
regex: /^[\w-]{15}([\w-]{3})?$/
},{
name:'bankName',
xtype:'textfield',
allowBlank:true,
fieldLabel: '甲方开户行'
},{
name:'bankNum',
xtype:'textfield',
allowBlank:true,
fieldLabel: '银行账号'
},{
name:'financer',
xtype:'textfield',
allowBlank:true,
fieldLabel: '账单负责人'
},{
fieldLabel : '纳税人证明1*',
xtype : 'fileuploadfield',
name : 'taxpayerFile1',
allowBlank:false,
buttonText: '浏览',
},{
fieldLabel : '纳税人证明2*',
xtype : 'fileuploadfield',
name : 'taxpayerFile2',
buttonText: '浏览',
allowBlank:true,
},{
fieldLabel : '合同文件',
xtype : 'fileuploadfield',
name : 'docmentFile',
buttonText: '浏览',
allowBlank:true,
},{
fieldLabel: '服务开始时间*',
name: 'sdate',
allowBlank:false,
xtype:'datefield',
format:'Y-m-d',
},{
fieldLabel: '服务结束时间*',
name: 'edate',
allowBlank:false,
xtype:'datefield',
format:'Y-m-d'
},{
fieldLabel: '付费账期/天*',
name: 'paymentDays',
allowBlank:false,
xtype:'numberfield'
},{
fieldLabel: '金额/月*',
name: 'amount',
allowBlank:false,
xtype:'numberfield'
},{
fieldLabel: '销售人*',
name: 'saler',
allowBlank:false,
xtype:'textfield'
},{
fieldLabel: '备注',
name: 'content',
height:135,
allowBlank:true,
xtype:'textarea'
}
],
buttons:[{
text:'确定',
handler: function(){
var form =uploadForm.getForm();
form.submit({
url: adr,
method:'POST',
params: {
clientId: clientId
},
success: function(from,action){
if(action.result){
Ext.MessageBox.alert('提示',action.result.message);
}else{
Ext.MessageBox.alert('提示','返回值不存在');
}
// uploadForm.getForm().reset();
}, failure: function (from,action) {
Ext.MessageBox.alert('失败',"上传失败,请检查内容后尝试!");
win.hide();
},
});
}
}]
}) ;
uploadForm.load({ //动态加载数据
url:findadr,
});
var win=new Ext.Window({
title : '上传新文档',
width : 600,
autoHeight: true,
border : false,
plain : true,
modal : true,
layout : 'fit',
bodyStyle : 'padding:5px;',
maximizable : false,// 禁止最大化
closeAction : 'hide',
closable : true,// 是否有关闭
collapsible : false,// 可折叠
iconCls : 'bind',
buttonAlign:'center',
items : [uploadForm],
});
win.show();
},
结果:

Extjs在form展示后台单个对象的属性的更多相关文章
- WPFS数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口)
WPFS数据绑定(要是后台类对象的属性值发生改变,通知在"client界面与之绑定的控件值"也发生改变须要实现INotitypropertyChanged接口) MainWindo ...
- 32)PHP,遍历对象的属性或者属性值
首先是遍历属性: <?php class A{ ; ; ; function fetchAllProp(){ //遍历时,key取得属性名,value取得对应值 foreach($this as ...
- Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...
- MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合
MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...
- ajax传递数组、form表单提交对象数组
在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...
- form表单传递对象数组
ajax传递数组.form表单提交对象数组 在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用 form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致 ...
- Javascript - ExtJs - Ext.form.Panel组件
FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...
- [oldboy-django][2深入django]后台生成form标签并设置标签的属性
# Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及submit标签还是要在前端写的, 但是Form标签内的Input标签可以在后台实现:只需要按以下步骤 - vi ...
- easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)
easyUI中datagrid展示对象下属性以及显示多个子属性 显示对象单个属性值 添加formatter属性 <th field="decidedzone" width=& ...
随机推荐
- 【HDU 6191】Query on A Tree 【可持久化字典树】
题目 给出一棵有n个结点的树,树根是1,每个结点给出一个value.然后给出q个询问,每个询问给出两个整数u和x,你要在以u结点为根的子树中找出一个结点v,使得val[v] xor x最大, 并输出这 ...
- 蒟蒻LQL的博客
这里是蒟蒻LQL的博客!!! 一枚水的不能再水的弱校ACMer···· 可能会在这写一些题解或者别的什么乱七八糟的··· 可能大概没什么人看,就当错题本好了o(* ̄▽ ̄*)ブ 因为太弱了难免有错误!发 ...
- 高性能Web服务器Nginx的配置与部署研究(2)Nginx入门级配置与部署及“Hello World”
1. Nginx 程序包 目前最新的开发版本时1.1.12: Linux/Unix:nginx-1.1.12.tar.gz Windows:nginx-1.1.12.zip 我们可以下载稳定版尝试: ...
- ROS Learning-032 (提高篇-010 Launch)Launch 深入研究 --- (启动文件编程)ROS 的 XML语法简介
ROS 提高篇 之 Launch 深入研究 - 01 - 启动文件的编程 - ROS 的 XML语法简介 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubu ...
- Java TreeMap的排序
TreeMap 和 HashMap 用法大致相同,但实际需求中,我们需要把一些数据进行排序:以前在项目中,从数据库查询出来的数据放在List中,顺序都还是对的,但放在HashMap中,顺序就完全乱了. ...
- Python创建单例模式的5种常用方法-乾颐堂
所谓单例,是指一个类的实例从始至终只能被创建一次. 方法1 如果想使得某个类从始至终最多只有一个实例,使用__new__方法会很简单.Python中类是通过__new__来创建实例的: 1 2 3 4 ...
- 如何快速增加pdf书签,解除pdf限制
一.需要的工具 福昕PDF阅读器 Foxit PDF Editor 2.2.1 build 1119 汉化版 下载地址:http://www.onlinedown.net/soft/51002.htm ...
- java 泛型详解(转)
普通泛型 class Point<T>{ // 此处可以随便写标识符号,T是type的简称 private T var ; // var的类型由T指定,即:由外部指定 publ ...
- JavaScript语言精粹 笔记04 数组
数组1 数组字面量2 长度3 删除4 列举5 混淆的地方6 方法7 维度 数组1 数组字面量 var empty = []; var numbers = [ 'zero', 'one', 'two', ...
- 51nod1298圆与三角形——(二分法)
1298 圆与三角形 题目来源: HackerRank 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出圆的圆心和半径,以及三角形的三个顶点,问圆同 ...