PDA

View Full Version : extended FormPanel layout column issues



asagala
19 Jun 2010, 8:01 PM
I am having an issue with one of my forms. All my forms extend a custom form called SubmitForm. Everything works fine except when I try to get one of m form implementations (that extend SubmitForm) to have a column layout. Nothing shows up. I know my form implementation is ok since if I change the extend statement to extend Ext.form.FormaPanel directly everything works.

Can someone help?

Here is my code for my SubmitForm




NurturLead.Component.SubmitForm = Ext.extend(Ext.form.FormPanel, {

border:false,
saveUrl:'saveUrl_not_set',
hideToolbar:false,
labelAlign:'left',
labelWidth:150,
labelPad: 10,
bodyStyle:'background:transparent;padding:10px;',
defaultType: 'textfield',

initComponent:function() {

if(!this.hideToolbar){
this.tbar = this.tbar || [];
this.tbar = this.tbar.concat(this.buildToolbar());
}

Ext.apply(this, {
autoScroll:true,
//layout:this.layout,
monitorValid:true,
margins:'5 5 5 5',
cmargins:'5 5 5 5'
//trackResetOnLoad: true
});

this.addEvents({formsuccess:true});

// call parent initComponent
NurturLead.Component.SubmitForm.superclass.initComponent.call(this);

},

buildToolbar: function(){
return [{
text: NurturLead.Localization.translate('save'),
iconCls:'icon-save',
formBind:true,
handler: this.onSave,
scope: this
}];

}

}); Here is the code for my form implementation



NurturLead.Campaigns.CampaignDetailPanel = function() {


NurturLead.Campaigns.CampaignDetailPanel.superclass.constructor.call(this, {
title:NurturLead.Localization.translate('campaigns'),
saveUrl: 'campaigns/updatecampaign',
iconCls: 'icon-campaigns',
trackResetOnLoad: true,
hideToolbar:true,
defaults:{
bodyStyle:'background:transparent;padding:10px;',
border:false,
frame:false
},
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
defaults:{
width:300,
listWidth: 250,
xtype: 'textfield',
anchor:'95%'
},
items:[
{
fieldLabel: 'id',
name: 'id',
allowBlank: false,
xtype:'hidden'
},{
fieldLabel: 'Last Name,
name: 'LastName',
xtype:'displayfield',
allowBlank: false,
maxLength: 50
}
]
},{
columnWidth:.5,
layout: 'form',
defaults:{
width:300,
listWidth: 250,
xtype:'textfield'
},
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]

});

};

//Ext.extend(NurturLead.Campaigns.CampaignDetailPanel, Ext.FormPanel, { -> If I use this instead everything works
Ext.extend(NurturLead.Campaigns.CampaignDetailPanel, NurturLead.Component.SubmitForm, {
.....
})

darthwes
19 Jun 2010, 8:49 PM
NurturLead.Component.SubmitForm = Ext.extend(Ext.form.FormPanel, {
initComponent:function() {

if(!this.hideToolbar){
this.tbar = this.tbar || [];
this.tbar = this.tbar.concat(this.buildToolbar());
}

Ext.apply(this, {
border:false,
saveUrl:'saveUrl_not_set',
hideToolbar:false,
labelAlign:'left',
labelWidth:150,
labelPad: 10,
bodyStyle:'background:transparent;padding:10px;',
defaultType: 'textfield',
autoScroll:true,
//layout:this.layout,
monitorValid:true,
margins:'5 5 5 5',
cmargins:'5 5 5 5'
//trackResetOnLoad: true
});

this.addEvents({formsuccess:true});

// call parent initComponent
NurturLead.Component.SubmitForm.superclass.initComponent.call(this);

},

buildToolbar: function(){
return [{
text: NurturLead.Localization.translate('save'),
iconCls:'icon-save',
formBind:true,
handler: this.onSave,
scope: this
}];

}

});

Is that what you're after?

asagala
19 Jun 2010, 9:02 PM
Not at all. I want to be able to have a column layout rendered correctly in a form when this form extends my custom SubmitForm. Your suggested changes do not help.

Thanks

darthwes
19 Jun 2010, 10:40 PM
You have to watch the ordering of the super init calls as well.



NurturLead.Component.SubmitForm = Ext.extend(Ext.form.FormPanel, {
initComponent: function () {

// call parent initComponent
NurturLead.Component.SubmitForm.superclass.initComponent.call(this);

if (!this.hideToolbar) {
this.tbar = this.tbar || [];
this.tbar = this.tbar.concat(this.buildToolbar());
}

Ext.apply(this, {
border: false,
saveUrl: 'saveUrl_not_set',
hideToolbar: false,
labelAlign: 'left',
labelWidth: 150,
labelPad: 10,
bodyStyle: 'background:transparent;padding:10px;',
defaultType: 'textfield',
autoScroll: true,
//layout:thi .layout,
monitorValid: true,
margins: '5 5 5 5',
cmargins: '5 5 5 5'
//trackResetOnLoad: true
});

this.addEvents({
formsuccess: true
});



},
buildToolbar: function () {
return [{
text: 'save',
iconCls: 'icon-save',
formBind: true,
handler: this.onSave,
scope: this
}];
}
});

NurturLead.Campaigns.CampaignDetailPanel = function () {
Ext.apply(this, {
title: 'campaigns',
saveUrl: 'campaigns/updatecampaign',
iconCls: 'icon-campaigns',
trackResetOnLoad: true,
hideToolbar: true,
defaults: {
bodyStyle: 'background:transparent;padding:10px;',
border: false,
frame: false
},
layout: 'column',
items: [{
columnWidth: 0.5,
layout: 'form',
defaults: {
width: 300,
listWidth: 250,
xtype: 'textfield',
anchor: '95%'
},
items: [{
fieldLabel: 'id',
name: 'id',
allowBlank: false,
xtype: 'hidden'
}, {
fieldLabel: 'Last Name',
name: 'LastName',
xtype: 'displayfield',
allowBlank: false,
maxLength: 50
}
]
}, {
columnWidth: 0.5,
layout: 'form',
defaults: {
width: 300,
listWidth: 250,
xtype: 'textfield'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
anchor: '95%'
}]
}]

});

NurturLead.Campaigns.CampaignDetailPanel.superclass.constructor.call(this);
};


Groovy?

darthwes
19 Jun 2010, 11:45 PM
Hey, I gave more thought to it. The timing on calling the constructors was bothering me. The way it should work is you should be able to apply your defaults over the class and then call the parent constructor and afterwards you're free to work with this as a post-rendered object. You have some stuff going on with the toolbar after your instantiation which meant we couldn't set it as hidden before instantiation since it isn't there to hide. I moved your code around a bit. I think this is the best form for you to use. Thanks for the problem :>



NurturLead.Component.SubmitForm = Ext.extend(Ext.form.FormPanel, {
border: false,
saveUrl: 'saveUrl_not_set',
labelAlign: 'left',
labelPad: 10,
labelWidth: 150,
bodyStyle: 'background:transparent;padding:10px;',
hideToolbar: false,
initComponent: function () {
if (!this.hideToolbar) {
this.tbar = this.tbar || [];
this.tbar = this.tbar.concat(this.buildToolbar());
}

Ext.apply(this, arguments[0], {
autoScroll: true,
monitorValid: true,
margins: '5 5 5 5',
cmargins: '5 5 5 5'
});

this.addEvents({
formsuccess: true
});

// call parent initComponent
NurturLead.Component.SubmitForm.superclass.initComponent.call(this);
},
buildToolbar: function () {
return [{
text: 'save',
iconCls: 'icon-save',
formBind: true,
handler: this.onSave,
scope: this
}];
}
});

NurturLead.Campaigns.CampaignDetailPanel = function () {
Ext.apply(this, arguments[0], {
title: 'campaigns',
saveUrl: 'campaigns/updatecampaign',
iconCls: 'icon-campaigns',
trackResetOnLoad: true,
hideToolbar: true,
defaults: {
bodyStyle: 'background:transparent;padding:10px;',
border: false,
frame: false
},
layout: 'column',
items: [{
columnWidth: 0.5,
layout: 'form',
defaults: {
width: 300,
listWidth: 250,
xtype: 'textfield',
anchor: '95%'
},
items: [{
fieldLabel: 'id',
name: 'id',
allowBlank: false,
xtype: 'hidden'
}, {
fieldLabel: 'Last Name',
name: 'LastName',
xtype: 'displayfield',
allowBlank: false,
maxLength: 50
}
]
}, {
columnWidth: 0.5,
layout: 'form',
defaults: {
width: 300,
listWidth: 250,
xtype: 'textfield'
},
items: [{
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
name: 'email',
vtype: 'email',
anchor: '95%'
}]
}]

});
NurturLead.Campaigns.CampaignDetailPanel.superclass.constructor.call(this);
};

Ext.extend(NurturLead.Campaigns.CampaignDetailPanel, NurturLead.Component.SubmitForm);

asagala
20 Jun 2010, 6:00 AM
Thanks for your help. What is the arguments[0] you added?

asagala
20 Jun 2010, 6:12 AM
By the way this breaks all my others form extending SubmitForm that arent column layouts. Ill figure it out.

darthwes
20 Jun 2010, 6:30 AM
Ext.apply is taking the args[0] and putting it on this. arguments[0] is the incoming config object passed to the constructor. You could name it instead of using arguments[0]. So, what I'm doing is I'm saying write the incoming config object onto this, dynamically adding properties. The third argument is the defaults.

So


var a = {name: 'abe'};
var b = {name: 'ben'};
var c = {name: 'carl'};
Ext.apply(a, b, c);
alert(a.name);

produces interesting results, I suggest you play with it. It also explains why you get the column layout stuck on everything. I hope some of this helped.