ext 4.1关于一个对象下面有几个对象,前台新建后发生后台的解决办法。
来源:互联网 发布:什么软件买火车票便宜 编辑:程序博客网 时间:2024/05/21 11:50
新建页面的关键代码:
xtype:'button',text: '新建一条推荐内容',bodyStyle : {padding : '10 10 10 10'},margins: '10 10 20 10',iconCls:'icon-add',handler:function(b){ var winPanel=b.ownerCt; var formPanel=winPanel.down('form[ref=main]');//这个form是最终向后台提交的form,这里拿到他的panel var formObj=formPanel.getForm(); //得到向后台提交的form的实体对象 var selfId=formObj.findField('recommendId').getValue(); //新建时候草稿的id,也就是这条recommend的id formPanel.add( new Ext.form.FieldContainer({ //向这个form添加容器,里面装的内容就是一个recommendContent对象 name:'fc'+contentCount, ref:'fc'+contentCount, layout: 'vbox', items: [{ xtype: 'textfield', name:'order'+contentCount, fieldLabel:'排序', hidden:true //设置为隐藏,这样就不影响面板效果 }, { xtype: 'textfield', name:'title'+contentCount, //上面获得得到的内容条数,这里对name进行赋值,后台才能区分 fieldLabel:'标题', hidden:true },{ xtype: 'textfield', name:'subhead'+contentCount, fieldLabel:'副标题', hidden:true },{ xtype: 'textfield', name:'link'+contentCount, fieldLabel:'超链接', hidden:true },{ xtype: 'textfield', name:'image'+contentCount, fieldLabel:'图片', hidden:true },{ xtype: 'textfield', name:'description'+contentCount, fieldLabel:'描述', hidden:true }] }) ); var addCount=formObj.findField('recommendContentCount').getValue(); //定义为了后台计数,计算所有的content条数 formObj.findField('recommendContentCount').setValue(++addCount) winPanel.add( new Ext.container.Container({ // xtype : 'container', order:contentCount, layout:'vbox', defaults: { style: { margin: '1 1 1 1' } }, items: [{xtype: 'button',text:'删除',href :'',iconCls:'icon-delete',handler:function(b){/*var delCount=formObj.findField('recommendedCount').getValue();formObj.findField('recommendedCount').setValue(--delCount)*/ //用户删除的时候,不减了,后台直接拿到最大值var container=b.ownerCt;var c=container.order;var fc=formPanel.down('fieldcontainer[ref=fc'+c+']');console.debug(fc);formPanel.remove(fc); //删除上面动态添加的内容(隐藏域)winPanel.remove(container); } },{xtype:'form',padding:'5 5 20 5',frame:true,width:400,bodyPadding :20,items:[ { fieldLabel:'排序'+contentCount,name :'order'+contentCount,xtype:'numberfield', listeners:{ //添加监听,就是要把当前textfield的值自动添加到上面的隐藏域中 change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('order'+c+'').setValue(newValue); } } }, { fieldLabel:'标题',name :'title'+contentCount,xtype:'textfield',alowBlank:false, listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('title'+c+'').setValue(newValue); } } }, { fieldLabel:'副标题',name :'subhead'+contentCount,xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('subhead'+c+'').setValue(newValue); } } }, { fieldLabel:'链接地址',name :'link'+contentCount,xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('link'+c+'').setValue(newValue); } } }, { fieldLabel:'图片的id',name :'image'+contentCount,xtype:'textfield',hidden:true, listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('image'+c+'').setValue(newValue); } } }, { xtype:'form', style: {border: 'none'},name:'image',url:self.baseUrl+"/"+selfId+"/"+this.name+"/upload", frame:true, padding :'0 0 0 0', items:[{ xtype: 'fieldcontainer', fieldLabel: '图片', labelWidth: 100, layout: 'vbox', items: [ { xtype: 'filefield', emptyText: '请选择上传文件', width: 180, name:'rcommendContentImg', buttonConfig: { text: '选择文件' }, listeners:{ change:function(view,value,opt){ console.debug(self.baseUrl+"/"+self.bid+"/"+this.name+"/upload"); var submitForm=view.ownerCt.ownerCt.getForm(); if(submitForm.isValid()){ submitForm.submit({ waitMsg: '请耐心等待...', success: function(form, action) { var url=action.result.url; var tempIds=url.split("/"); var fileId=tempIds.pop();//根据后台传回来的url,获得文件的id var parentForm=view.ownerCt.ownerCt.ownerCt.getForm(); var container=view.ownerCt.ownerCt.ownerCt.ownerCt; var c=container.order;//找到这个filefield所在容器的order console.debug(c); parentForm.findField('image'+c).setValue(fileId); var image=view.ownerCt.ownerCt.down('image'); image.setSrc(self.baseUrl+"/file/"+fileId);view.ownerCt.ownerCt.doLayout(); }, failure:function(){ } }); } } } }] },{ xtype:'image', maxHeight:200, maxWidth:200 }] },{ fieldLabel:'描述',name :'description',xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('description'+c+'').setValue(newValue); } } }] }] }) ) contentCount++;//计数用的,这里加一 }
编辑时候的代码:
{ xtype:'fieldset', ref:'savaedContent', columnWidth: 0.5, title: '点击查看已有推荐内容', collapsible: true, collapsed:true},{xtype:'button',text: '新建一条推荐内容',bodyStyle : {padding : '10 10 10 10'},iconCls:'icon-add',handler:function(b){ var winPanel=b.ownerCt; var formPanel=winPanel.down('form[ref=main]');//这个form是最终向后台提交的form,这里拿到他的panel var formObj=formPanel.getForm(); //得到向后台提交的form的实体对象 var contentCount=formObj.findField('saveedCount').getValue();//得到隐藏域已经记录下数据库中保存的content数量 formPanel.add( new Ext.form.FieldContainer({ //向这个form添加容器,里面装的内容就是一个recommendContent对象 name:'fc'+contentCount, ref:'fc'+contentCount, layout: 'vbox', items: [{ xtype: 'textfield', name:'order'+contentCount, fieldLabel:'排序', hidden:true //设置为隐藏,这样就不影响面板效果 }, { xtype: 'textfield', name:'title'+contentCount, //上面获得得到的内容条数,这里对name进行赋值,后台才能区分 fieldLabel:'标题', hidden:true },{ xtype: 'textfield', name:'subhead'+contentCount, fieldLabel:'副标题', hidden:true },{ xtype: 'textfield', name:'link'+contentCount, fieldLabel:'超链接', hidden:true },{ xtype: 'textfield', name:'image'+contentCount, fieldLabel:'图片', hidden:true },{ xtype: 'textfield', name:'description'+contentCount, fieldLabel:'描述'+contentCount, hidden:true }] }) ); var addCount=formObj.findField('recommendContentCount').getValue(); //定义为了后台计数,计算所有的content条数 var allCount=parseInt(addCount)+1; console.debug(allCount); formObj.findField('recommendContentCount').setValue(allCount); winPanel.add( new Ext.container.Container({ // xtype : 'container', order:contentCount, layout:'vbox', defaults: { style: { margin: '1 1 1 1' } }, items: [{xtype: 'button',text:'删除',href :'',iconCls:'icon-delete',handler:function(b){var delCount=formObj.findField('recommendContentCount').getValue();formObj.findField('recommendContentCount').setValue(--delCount)var container=b.ownerCt;var c=container.order;var fc=formPanel.down('fieldcontainer[ref=fc'+c+']');console.debug(fc);formPanel.remove(fc); //删除上面动态添加的内容(隐藏域)winPanel.remove(container); } },{xtype:'form',padding:'5 5 20 5',frame:true,width:700,height:800,bodyPadding :20,items:[ { fieldLabel:'排序'+contentCount,name :'order'+contentCount,xtype:'numberfield', listeners:{ //添加监听,就是要把当前textfield的值自动添加到上面的隐藏域中 change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('order'+c+'').setValue(newValue); } } }, { fieldLabel:'标题',name :'title'+contentCount,xtype:'textfield',alowBlank:false, listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('title'+c+'').setValue(newValue); } } }, { fieldLabel:'副标题',name :'subhead'+contentCount,xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('subhead'+c+'').setValue(newValue); } } }, { fieldLabel:'链接地址',name :'link'+contentCount,xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('link'+c+'').setValue(newValue); } } }, { fieldLabel:'图片的id',name :'imageId'+contentCount,xtype:'textfield',hidden:true, listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('image'+c+'').setValue(newValue); } } }, { xtype:'form', style: {border: 'none'},height:500,width:600,url:self.baseUrl+"/"+self.bid+"/"+this.name+"/upload", frame:true, padding :'0 0 0 0', items:[{ xtype: 'fieldcontainer', fieldLabel: '图片', labelWidth: 100, layout: 'vbox', items: [ { xtype: 'filefield', emptyText: '请选择上传文件', width: 180, name:'rcommendContentImg', buttonConfig: { text: '选择文件' }, listeners:{ change:function(view,value,opt){ console.debug(self.baseUrl+"/"+self.bid+"/"+this.name+"/upload"); var submitForm=view.ownerCt.ownerCt.getForm(); if(submitForm.isValid()){ submitForm.submit({ waitMsg: '请耐心等待...', success: function(form, action) { var url=action.result.url; var tempIds=url.split("/"); var fileId=tempIds.pop();//根据后台传回来的url,获得文件的id var parentForm=view.ownerCt.ownerCt.ownerCt.getForm(); var container=view.ownerCt.ownerCt.ownerCt.ownerCt; var c=container.order;//找到这个filefield所在容器的order parentForm.findField('imageId'+c).setValue(fileId); var image=view.ownerCt.ownerCt.down('image'); image.setSrc(self.baseUrl+"/file/"+fileId);view.ownerCt.ownerCt.doLayout(); }, failure:function(){ } }); } } } }] },{ xtype:'image', maxHeight:200, maxWidth:200 }] },{ fieldLabel:'描述',name :'description',xtype:'textfield', listeners:{ change:function(view,newValue){ var container=view.ownerCt.ownerCt; var c=container.order; var fc=formObj.findField('description'+c+'').setValue(newValue); } } }] }] }) ) contentCount++;//计数用的,这里加一 }}
效果图:
- ext 4.1关于一个对象下面有几个对象,前台新建后发生后台的解决办法。
- 前台获取后台的数据,通过JSON后去后台的对象的数组
- 新建对象时 属性发生的变化
- C# Ext关于前台调用后台的方法
- 关于前台获取到的后台json对象取值时undefined的解决方法
- 前台js对象转后台java对象
- 前台传过来来好几个对象,后台同时接受这几个相同的javabean: 实践总结
- 关于HttpSession前台无值后台有值的解决方法
- JSF如何在后台获得前台页面的标签对象
- dwr后台Bean与前台JS对象的转换关系
- 后台返回的json对象,前台取值
- json_后台传送json格式的对象到前台页面
- web前台和后台之间对象的传递
- 一个页面很长下面有提交按钮,提交后还在原位置的简单解决办法
- XMLHttpRequest对象发送请求后,请求的状态有几个值,每个值代表什么意思?
- 将前台json对象传入java后台
- 后台返回json对象,前台取出属性
- 前台将多个json对象传到后台解析
- 字典树简介
- warning: no newline at the end of file
- Nginx集群
- android之Fragment
- {转载}Linux Top 命令解析 比较详细 {from:http://www.jb51.net/LINUXjishu/34604.html}
- ext 4.1关于一个对象下面有几个对象,前台新建后发生后台的解决办法。
- long 类型的字节长度
- OpenStack Swift遇到了Erasure Code
- 如何用GCC编译生成动态链接库*.SO文件 动态库
- Android TextView 显示HTML代码以及代码中的图片标签
- 括号配对问题
- wireshark源码 windows下编译
- POJ2411--Mondriaan's Dream
- .net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件