ext 4.1关于一个对象下面有几个对象，前台新建后发生后台的解决办法。

最新推荐文章于 2014-01-02 15:48:43 发布
最新推荐文章于 2014-01-02 15:48:43 发布
阅读量1.2k 收藏
点赞数
分类专栏： ext
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhengyuechuan/article/details/9499191
版权

新建页面的关键代码：

				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++;//计数用的，这里加一					   
				}
				
			}

效果图：





zhengyuechuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
封装一个Ext消息提示框，显示几秒后自动消失
11-24
本资源是关于封装一个 Ext 消息提示框，显示几秒后自动消失的知识点集合。该资源主要涵盖了 CSS 和 JavaScript 代码，旨在实现一个可以自动消失的消息提示框。 1. CSS 代码分析 在 CSS 代码中，我们可以看到一些...
Ext2.0教程三：Ext2.0从新建窗口开始
南极光经验分享
08-28 3359
--wayfoon    开发中，通常需要新建窗口，比如登陆窗口，新增窗口。新建窗口使用到Ext.Window提供的类,你可以先预览效果：效果图建立一个简单的窗口:var win=new Ext.Window({            id:w,            title:wayfoon:新窗口,//窗口显示名称             wi
Ext中获取节点对象的方法分析
weoln的专栏
10-17 3325
 Ext中提供了三个方法获取某个节点对象，在使用的时候经常混淆，现把三个方法区别记录下来，供大家参考。     Ext.get(id):返回一个HTML DOM对象。  Ext.getCmp(id)：返回Ext.Component，如果要调用ext的方法，则需要使用该方法获取组件。  Ext.getDom(id)：返回HTMLElement。 举个例子，我们声明一棵树，js
返回对象在当前级别中是第几个元素的实现代码
09-05
标题提到的“返回对象在当前级别中是第几个元素的实现代码”就是解决这个问题的一种方法。 在提供的代码片段中，我们看到一个名为`prev`的函数，它用于找到指定元素`elem`在当前层级中的位置。这个函数接受两个参数...
EXT4.1 api
04-16
作者的网站链接可能是为了提供更新或者更详细的信息来源，对于开发者来说，这是一个宝贵的资源，可以追踪EXT4.1 API的最新进展和改进。 EXT4.1相对于EXT4主要增加了以下特性： 1. 大文件支持：EXT4支持最大16TB的...
Python响应对象text属性乱码解决方案
12-20
在获得网页响应对象res后，使用res.text属性可以获得网页源代码，但可能出现乱码！因为requests库会使用自动猜测的解码方式将抓取的网页源码进行解码，然后存储到res对象的text属性中； 但有的网站的编码格式和...
extjs4.1 grid columns处理几个小问题（第一：combobox 中的store带参数到后台，第二model数据是一个object）
zhengyuechuan的专栏
07-15 7232
第一个问题：combobox中的store可以通过带参数来区分。 Ext.define("zyc.view.test.ComboboxStoreParam",{ extend:'Ext.panel.Panel', title : '测试',//标题 alias: 'widget.comboboxstoreparam', frame :
ext tree 刷新时候回到之前选择的节点，使用expandPath方法
zhengyuechuan的专栏
07-09 6964
今天遇到一个问题，就是tree node修改后回到原来的节点问题。api中有一个expandPath方法。因为我是在右键点击下面操作的，所以很容易得到操作的record。同时我们也需要得到treePanel和record的path。 var treePanel= Ext.getCmp('directorytree'); va
ext tree 刷新某个指定的节点
zhengyuechuan的专栏
07-05 6256
if (formObj.isValid()) { formObj.submit({ waitTitle : '发送数据', waitMsg : '正在保存...', timeout :
extjs4.1 一个actioncolumn多个item 在mvc controller中分开控制。
zhengyuechuan的专栏
06-21 5947
view页面代码： columns : [{header:'公告id',dataIndex :'id',width:150,align: 'center'}, {header:'公告标题',dataIndex :'title',width:150,align: 'center',editor:{xtype:'textfield',allowBlank:tru
extjs mvc controller 监听浏览器关闭或者页面刷新
zhengyuechuan的专栏
10-11 4301
init:function(){ this.control({ 'RevisionFormNew':{ 'show':function(view){ //监听浏览器关闭事件，如果窗口关闭或者页面刷新，删除草稿 Ext.EventManager.on(window,
extjs4.1 grid 分组 （对象是一个object）以及其它。
zhengyuechuan的专栏
09-13 4269
前几天做分组，老是遇到问题，后来经过测试，找到了解决方法。 model中： Ext.define('Sharera.model.community.Topic', { extend: 'Ext.data.Model', idProperty: 'id', fields: [ {name:'id',type:'long'}, {nam
ext4.1动态生成多个checkboxgroup（或者radiogroup），并且有toolbar操作、
zhengyuechuan的专栏
07-14 4035
前台controller代码： Ext.define('zyc.controller.Filter', { extend: 'Ext.app.Controller', init:function(){ this.control({ 'filterpanel':{ render:function(view,opts){ Ext.Ajax.re
ext tree 异步加载取消自动加载功能。
zhengyuechuan的专栏
07-05 3954
今天在一个面板上面嵌套了一个treepanel，需要得到当前的id后发送到后天获取值，这时候就不要treestore的自动加载了，我是用到异步加载的。 解决办法把下面代码注释掉： Ext.define("Sharera.system.store.directory.UnitTree",{ extend:'Ext.data.TreeStore', model: 'Sharera.system
ext4.x 下拉树（commbox tree）实现。
zhengyuechuan的专栏
08-14 3156
{ name: 'city', fieldLabel: '城市', xtype: 'treecombox', valueField: 'id', displayField: 'name', store: Ext.create('Ext.data.TreeStore', {
ext4.1 实现按钮点击时候浏览器全屏和取消全屏。
zhengyuechuan的专栏
07-19 2949
工具类中的代码：Ext.define("zyc.util.fullScreenUtil",{ // singleton: true, /** * Check if window is in full screen mode. * @return {Boolean} full screen mode */ tip:function(){
extjs4.1后台管理图标修改。
zhengyuechuan的专栏
01-02 2811
基本思路在再官方例子中来。 /** * @class Ext.org.ImageView * @extends Ext.view.View * @xtype imageview * * This class implements the "My Images" view (the images in the organizer). This class * incorpora
ext4.1 tree filter
zhengyuechuan的专栏
10-14 2701
昨天tree的搜索，弄了很久，终于弄出来了。 首先写一个类。这是一个工具类 Ext.define("Sharera.util.TreeFilter",{ filterByText: function(text,by) { this.filterBy(text, by); }, /** * Filter the tree on a strin
ext4.1 添加滚动提示框（自动消失，冒泡效果）停顿几秒后消失
zhengyuechuan的专栏
06-19 2386
导入文件 /ext/examples.js">     /ext/resources/css/example.css" type="text/css"/> 在需要的地方添加这段代码; Ext.example.msg("提示","用户名或者密码错误或账号未被激活");     文件下载地址：http://pan.baidu.com/share/link?sharei
举几个Android studio代码中遇到的主要问题及解决办法
最新发布
05-20
1. 缺少依赖库：在 `build.gradle` 文件中添加缺少的依赖库即可解决。例如，如果缺少了 `com.android.support:appcompat-v7` 库，则需要在 `dependencies` 代码块中添加以下代码： ``` implementation '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值