新建页面的关键代码:
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++;//计数用的,这里加一
}
}
效果图: