PDA

View Full Version : TabPanel inside FormPanel :: Fields from Tab which was not clicked not sent to server



razvanioan
12 Aug 2010, 2:29 AM
This was not a problem in ExtJS 2.x, this code is working ok under 2.x, but migrated to 3.x it seems that doesn't work anymore.

Basically, I have a complex Form which contains also a TabPanel, with parts of the fields in different tabs (see attachement).

If I send the form, without going to other tabs (User for example), the fields under that tab will not be sent to the server ! Those fields are filled automatically and practically don't need to be edited often, so no need to go to tha tab. If I click once that tab, without changing anything else, those fields will be sent with the form as expected.

I have defferedRender: false on that tabPanel, and the data is there (I've put an alert on send button with one of the fields value).

I've put also the important parts of the formPanel bellow to make an ideea and maybe find the problem:



var newTicketForm = function(formConfig){
var formId = Math.random();

var myForm = new Ext.FormPanel(
Ext.apply({
id: 'new-ticket-form-' + formId
,closable: true
,monitorValid: true
,layout: 'form'
,frame: true
,....other settings....
,items: [{
xtype: 'textfield'
,name: 'subject'
,....other settings....
},{
layout: 'column'
,border: false
,items: [{
width: 130
,layout: 'form'
,border: false
,items: [{
xtype: 'combo'
,name: 'priority_id'
,....other settings....
}]
},{
width: 130
,layout: 'form'
,border: false
,items: [{
xtype: 'combo'
,name: 'communication_type_id'
,....other settings....
}]
},{
width: 200
,layout: 'form'
,border: false
,items: [{
xtype: 'combo'
,name: 'assigned_to'
,....other settings....
}]
},{
width: 165
,layout: 'form'
,border: false
,items: [{
xtype: 'xdatetime'
,name: 'due_date'
,....other settings....
}]
}]
},{
xtype: 'tabpanel'
,deferredRender: false
,layoutOnTabChange: true
,plain: true
,activeTab: 0
,border: false
,height: 310
,width: 620
,items: [{
title: 'Details'
,xtype: 'panel'
,layout: 'border'
,....other settings....
,items: [{
xtype: 'htmleditor'
,region: 'center'
,name: 'description'
,....other settings....
}]
},{
title: 'Screenshot(s)'
,....other settings....
,items: [
new Ext.ux.swfUploadPanel({
id: 'upload-panel-'+formId
,....other settings....
})
]
},{
title: 'User'
,xtype: 'panel'
,layout: 'form'
,....other settings....
,items: [{
layout: 'column'
,border: false
,items: [{
width: 298
,layout: 'form'
,border: false
,items: [{
xtype: 'trigger'
,triggerClass: 'x-form-search-trigger'
,name: 'user_name'
,....other settings....
},{
xtype: 'combo'
,name: 'user_domain'
,....other settings....
},{
xtype: 'textfield'
,name: 'user_full_name'
,....other settings....
},{
xtype: 'textfield'
,name: 'user_email'
,....other settings....
}]
},{
width: 298
,layout: 'form'
,border: false
,items: [{
xtype: 'trigger'
,triggerClass: 'x-form-search-trigger'
,name: 'user_computer'
,....other settings....
},{
xtype: 'textfield'
,name: 'user_ip'
,....other settings....
},{
xtype: 'textfield'
,name: 'user_mac'
,....other settings....
}]
}]
}]
}]
}]
,buttonAlign: 'left'
,buttons: [{
text: 'save'
,formBind: true
,handler: function(){
,....other settings....
}
},{
text: 'Cancel'
,iconCls: 'item-cancel'
,handler: function(){
var main = Ext.getCmp('main-tab-panel');
main.remove(main.getActiveTab());
}
}]
}
,formConfig || {})
);

return myForm;
};


Any help appreciated,
Razvan

razvanioan
12 Aug 2010, 9:42 PM
Nobody ? :(

razvanioan
13 Aug 2010, 5:06 AM
Is this actually a bug in the end ?

In the documentation there is clearly specified that the unactivated (unclicked) tab fields will not be sent to the server if defferedRender is true...


Note: leaving deferredRender as true means that the content within an unactivated tab will not be available. For example, this means that if the TabPanel is within a form, then until a tab is activated, any Fields within unactivated tabs will not be rendered, and will therefore not be submitted and will not be available to either getValues or setValues.

I have succeded to send all form fields including the ones in the tabs I don't activate, using forceLayout: true on those tabs, but this get's me to another problem...
the form remains dirty, even after the form was successfully sent to the server and I reset it IF I'm not activating other tabs....

This gives me crazy already :(

Thanks,
Razvan

razvanioan
18 Aug 2010, 9:17 PM
Yeap,

I don't think that there's a bug in ExtJS 3.x defferedRender:false for TabPanels, because I've done a simple test and it works, but in my "more complex application" example it is not and I didn't figure it out why.

The fields under unactivated (unclicked) tabs are not sent to the server (like deferredRender would be true, but not), but the data is accessible using getValue, setValue which is odd.

I've managed to force sending them by using forceLayout on those tabs, and the problem with form always dirty was because of htmlEditor which is always dirty in 3.x and used the override found on this forum, so my problem seems to be solved in this way.

Alain
7 Sep 2010, 12:09 AM
I have the same problem, deferred:render, forcelayout: true and hidemode: "offset" or not working...
My "FormPanel" resides in a Window, and inside the form resides the TabPanel, inactive tabs were not rendered regardless of configuration parameters i tried every possible combination...

The dirty solution that worked for me was to map the values from getFieldValues that do not exist in the getValues and pass them in the param option.


var obj = lw.Form.getForm().getFieldValues();
var obj1 = lw.Form.getForm().getValues();
var params = {};

for(key in obj)
if(!obj1[key])
params[key] = obj[key];

lw.Form.getForm().submit({
clientValidation: lw.clientValidation,
url: "handler.ashx",
submitEmptyText: false,
waitMsg: "Saving...",
params: params,
success: function (f, response) {
if (response.result.error) {
Ext.MessageBox.show({
title: 'Error',
msg: response.result.error,
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
return;
}
if (response.message) {
Ext.MessageBox.show({
title: 'Message from the Server',
msg: action.result.message,
buttons: Ext.MessageBox.OK
});
}
if (response.action != "delete") {
lw.Form.getForm().reset();
}
lw.Form.getForm().reset();
lw.FormWindow().hide();
lw.Load();
}
});
lw.clientValidation = true;