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

  1. 先来后台:
  2. public void find(){
  3. String clientId = request.getParameter("clientId");
  4. BusinessContract bc = businessContractService.getLastContract(clientId);
  5. response.setContentType("text/html;charset=UTF-8");
  6. JSONObject json = JSONObject.fromObject(bc);
  7. ajaxWrite("{bc:["+json.toString()+"]}");
  8. }
  1. 前台代码:
  2. win form放在一起
  3. text:'客户合同上传',
  4. scope:this,
  5. handler: function(item, event){
  6. var record=this.getSelectionModel().getSelected();
  7. if(!record){
  8. Ext.MessageBox.alert('提示', '请选择客户信息!');
  9. return;
  10. }
  11. var clientId=record.id;
  12. var adr = '************'; //form表单提交路径
  13. var findadr="*****************";//form表单数据来源
  14. var company =record.data.bi_name;//来源于选中行的数据
  15. var uploadForm=new Ext.form.FormPanel({//按照顺序,先创建一个form表单
  16. width:600,
  17. baseCls: 'x-plain',
  18. frame:true,
  19. layout: 'form',
  20. fileUpload: true,//文件上传必须添加该属性,(PS:此处出现问题,添加该属性之后返回值里action.result为空,去掉则正常,暂时没解决)
  21. autoHeight:true,
  22. labelWidth:90,
  23. defaults:{
  24. anchor: '95%',
  25. allowBlank: false
  26. },
  27. renderTo: Ext.getBody(),
  28. reader: new Ext.data.JsonReader({//此处动态加载数据的属性获取
  29. root: 'bc'  //取值对象
  30. },
  31. [    //对象里面的字段
                  'contractType',
  32. 'companyAddress','companyName','companyPhone','taxNum','bankName',
  33. 'bankNum','financer',
  34. {name:'taxpayerFile1',convert :function(v,record){  //这里是上传文件的路径,本来是服务器路径,这里就不予展示,直接提示是否上传过
  35. if(v){
  36. return '已经上传';
  37. }else{
  38. return '暂无文件';
  39. };
  40. }},
  41. {name:'taxpayerFile2',convert :function(v,record){
  42. if(v){
  43. return '已经上传';
  44. }else{
  45. return '暂无文件';
  46. };
  47. }},{name:'docmentFile',convert:function(v,record){
                       if(v){      
                        return '已经上传';
  1. }else{
  2. return '暂无文件';
  3. };}
  1.                 },
  1. {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} 所以只能对格式加以控制
  2. return Ext.util.Format.date(new Date(v),'Y-m-d');
  3. }},
  4. {name:'edate',type:"date",mapping:'edate.time',convert :function(v,record){
  5. return Ext.util.Format.date(new Date(v),'Y-m-d');
  6. }},
  7. 'paymentDays'
  8. ,'amount','saler','content'
  9. ]),
  10. items:[{
  11. fieldLabel:'当前客户',
  12. xtype : 'tbtext',
  13. text:'<b>'+company+'</b>',
  14. valueField :clientId,
  15. name :'compnay'
  16. },{
  17. fieldLabel:'合同类型',
  18. xtype:'attrCombo',
  19. displayField:'name',
  20. valueField :'name',
  21. editable:false,
  22. url:'/cs/customer/cct_find.ftl',
  23. name:'contractType'
  24. },{
  25. name:'companyName',
  26. xtype:'textfield',
  27. allowBlank:false,
  28. fieldLabel: '甲方全称*'
  29. },{
  30. name:'companyAddress',
  31. xtype:'textfield',
  32. fieldLabel: '甲方地址',
  33. allowBlank:true,
  34. },{
  35. name:'companyPhone',
  36. xtype:'textfield',
  37. allowBlank:true,
  38. fieldLabel: '甲方电话'
  39. },{
  40. name:'taxNum',
  41. xtype:'textfield',
  42. fieldLabel: '甲方税号',
  43. allowBlank:true,
  44. regex: /^[\w-]{15}([\w-]{3})?$/
  45. },{
  46. name:'bankName',
  47. xtype:'textfield',
  48. allowBlank:true,
  49. fieldLabel: '甲方开户行'
  50. },{
  51. name:'bankNum',
  52. xtype:'textfield',
  53. allowBlank:true,
  54. fieldLabel: '银行账号'
  55. },{
  56. name:'financer',
  57. xtype:'textfield',
  58. allowBlank:true,
  59. fieldLabel: '账单负责人'
  60. },{
  61. fieldLabel : '纳税人证明1*',
  62. xtype : 'fileuploadfield',
  63. name : 'taxpayerFile1',
  64. allowBlank:false,
  65. buttonText: '浏览',
  66. },{
  67. fieldLabel : '纳税人证明2*',
  68. xtype : 'fileuploadfield',
  69. name : 'taxpayerFile2',
  70. buttonText: '浏览',
  71. allowBlank:true,
  72. },{
  73. fieldLabel : '合同文件',
  74. xtype : 'fileuploadfield',
  75. name : 'docmentFile',
  76. buttonText: '浏览',
  77. allowBlank:true,
  78. },{
  79. fieldLabel: '服务开始时间*',
  80. name: 'sdate',
  81. allowBlank:false,
  82. xtype:'datefield',
  83. format:'Y-m-d',
  84. },{
  85. fieldLabel: '服务结束时间*',
  86. name: 'edate',
  87. allowBlank:false,
  88. xtype:'datefield',
  89. format:'Y-m-d'
  90. },{
  91. fieldLabel: '付费账期/天*',
  92. name: 'paymentDays',
  93. allowBlank:false,
  94. xtype:'numberfield'
  95. },{
  96. fieldLabel: '金额/月*',
  97. name: 'amount',
  98. allowBlank:false,
  99. xtype:'numberfield'
  100. },{
  101. fieldLabel: '销售人*',
  102. name: 'saler',
  103. allowBlank:false,
  104. xtype:'textfield'
  105. },{
  106. fieldLabel: '备注',
  107. name: 'content',
  108. height:135,
  109. allowBlank:true,
  110. xtype:'textarea'
  111. }
  112. ],
  113. buttons:[{
  114. text:'确定',
  115. handler: function(){
  116. var form =uploadForm.getForm();
  117. form.submit({
  118. url: adr,
  119. method:'POST',
  120. params: {
  121. clientId: clientId
  122. },
  123. success: function(from,action){
  124. if(action.result){
  125. Ext.MessageBox.alert('提示',action.result.message);
  126. }else{
  127. Ext.MessageBox.alert('提示','返回值不存在');
  128. }
  129. // uploadForm.getForm().reset();
  130. }, failure: function (from,action) {
  131. Ext.MessageBox.alert('失败',"上传失败,请检查内容后尝试!");
  132. win.hide();
  133. },
  134. });
  135. }
  136. }]
  137. }) ;
  138. uploadForm.load({  //动态加载数据
  139. url:findadr,
  140. });
  141. var win=new Ext.Window({
  142. title : '上传新文档',
  143. width : 600,
  144. autoHeight: true,
  145. border : false,
  146. plain : true,
  147. modal : true,
  148. layout : 'fit',
  149. bodyStyle : 'padding:5px;',
  150. maximizable : false,// 禁止最大化
  151. closeAction : 'hide',
  152. closable : true,// 是否有关闭
  153. collapsible : false,// 可折叠
  154. iconCls : 'bind',
  155. buttonAlign:'center',
  156. items : [uploadForm],
  157. });
  158. win.show();
  159. },

结果:

Extjs在form展示后台单个对象的属性的更多相关文章

  1. WPFS数据绑定(要是后台类对象的属性值发生改变,通知在“client界面与之绑定的控件值”也发生改变须要实现INotitypropertyChanged接口)

    WPFS数据绑定(要是后台类对象的属性值发生改变,通知在"client界面与之绑定的控件值"也发生改变须要实现INotitypropertyChanged接口) MainWindo ...

  2. 32)PHP,遍历对象的属性或者属性值

    首先是遍历属性: <?php class A{ ; ; ; function fetchAllProp(){ //遍历时,key取得属性名,value取得对应值 foreach($this as ...

  3. Asp.net MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合

    今天为大家分享下 Asp.net MVC 将数据从前台传递到后台的几种方式. 环境:VS2013,MVC5.0框架 1.基本数据类型 我们常见有传递 int, string, bool, double ...

  4. MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合

    MVC 传递数据 从前台到后台,包括单个对象,多个对象,集合 1.基本数据类型 我们常见有传递 int, string, bool, double, decimal 等类型. 需要注意的是前台传递的参 ...

  5. ajax传递数组、form表单提交对象数组

    在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致,那么传值就没有什么问题.不过,在前几天的开发 ...

  6. form表单传递对象数组

    ajax传递数组.form表单提交对象数组 在JSP页面开发中,我们常常会用到form表单做数据提交,由于以前一直只是使用 form表单提交单个对象,只要表单文本域的name值和接收的对象的属性名一致 ...

  7. Javascript - ExtJs - Ext.form.Panel组件

    FormPanel组件(Ext.form.FormPanel) logogram:Ext.form.Panel | xtype:form Ext.form.Panel.配置 frame }//旗下所有 ...

  8. [oldboy-django][2深入django]后台生成form标签并设置标签的属性

    # Form生成html标签 a. 通过Form生成Input输入框,Form标签,以及submit标签还是要在前端写的, 但是Form标签内的Input标签可以在后台实现:只需要按以下步骤 - vi ...

  9. easyUI中datagrid展示对象下属性以及显示多个子属性(Day_37)

    easyUI中datagrid展示对象下属性以及显示多个子属性 显示对象单个属性值 添加formatter属性 <th field="decidedzone" width=& ...

随机推荐

  1. 编码总结,以及对BOM的理解

    一.前言 在跨平台.跨操作系统或者跨区域之间,经常会涉及到编码的问题,因为前段时间在项目中,遇到了因为编码而产生乱码的问题,以前对编码也是一知半解,所以决定对编码有一个更为深入的了解,因此才有了这篇自 ...

  2. Dell 1420N使用Kubuntu默认无线驱动后网络不稳定的解决方法

    前几天在我的Dell 1420N上安装了Kubuntu 13.04,装了系统软件中的私有无线网卡驱动Broadcom STA wireless driver后,虽然能上网,但是很不稳定,经常断线,非常 ...

  3. 如何安装Zend Studio 以及汉化和基本准备工作

    昨天从早上一直弄到晚上10点,可累死我了,网上的资料都是掺次不齐,所以我写一篇系统点的文章来告诉大家怎么做. 1.如果你想进行一套PHP系统的开发,肯定是要有“尚方宝剑”的,这个尚方宝剑就是PHP工具 ...

  4. 三个参数,对mysql存储限制的影响

    1.max_allowed_packet  这个参数会影响单此插入或读取的包的大小,一般和blob字段共用,但要注意一点是这个参数好像是分服务端与客户端的,如果想输出大字段的内容,则在用客户端链接服务 ...

  5. noi2729 Blah数集

    Blah数集 大数学家高斯小时候偶然间发现一种有趣的自然数集合Blah,对于以a为基的集合Ba定义如下: (1) a是集合Ba的基,且a是Ba的第一个元素: (2)如果x在集合Ba中,则2x+1和3x ...

  6. 常用的 Python 调试工具,Python开发必读-乾颐堂

    以下是我做调试或分析时用过的工具的一个概览.如果你知道有更好的工具,请在评论中留言,可以不用很完整的介绍. 日志 没错,就是日志.再多强调在你的应用里保留足量的日志的重要性也不为过.你应当对重要的内容 ...

  7. JS作用域理解(声明提升)

    1.JS解析步骤: a.预解析 将变量声明提升: 将函数声明及函数内容提升,可以理解成原来位置的函数在解析代码时已经提到代码初始位置: 块内的变量声明和函数声明也会被提升,例如if语句 遇到重名,只留 ...

  8. python nose的html报告优化

    用的是nose的nose-html-reporting (0.2.3)插件生成报告.用了bootstrap前端框架,加入了开始时间和计算持续时间,及其本地化. 优化后的显示效果: 代码地址

  9. Java Decompiler(Java反编译工具)

    参考:http://blog.csdn.net/yulei_qq/article/details/24175547 Java Decompiler可以对整个jar包进行反编译,也可以将其集成到ecli ...

  10. BZOJ 2460 [BeiJing2011]元素(线性基模板题)

    Description 相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔法矿石炼制法杖的技术.那时人们就认识到,一个法杖的法力取决于使用的矿石.一般地,矿石越多则法力越强 ...