PDA

View Full Version : Problem with tabs and htmleditor



xos
28 Nov 2007, 3:09 AM
Hello everybody,

I've got the following problem.
I have a form panel containing 4 tabs. In each tab, I have an htmleditor component.
At the end of the form panel, I added a submit button component.
The data are posted to a PHP script that returns a JSON answer, true on success, false on failure.

My problem is the following :

- I load the page, I click on one of the 4 tabs and I modify the content inside the htmleditor which belongs to this tab. When I click the submit button, I want to pass to my PHP script the values of the 4 htmleditors regardless they have been edited or not. Or the problem is, when i just click on 1 tab, and then edit the text inside the corresponding htmleditor, only the current active tab is POSTed when I submit.

My question is : how to force my form component to ALWAYS subit the content of the 4 htmleditors (thus including the default untouched values) without having to enter into each of the tabs ?

Here is my code :



Ext.onReady(function(){

Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';

var bd = Ext.getBody();

bd.createChild({tag: 'h2'});

var tab2 = new Ext.FormPanel({
url: 'processAnswer.php',
labelAlign: 'top',
title: 'Texts modifications',
bodyStyle:'padding:5px',
width: 600,
id: 'tab2',
items: [{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:400,
defaults:{bodyStyle:'padding:10px'},
items:[{
cls:'x-plain',
title:'Text 1',
layout:'fit',
items: {
xtype:'htmleditor',
id:'edFRB',
fieldLabel:'edFRB',
value:'Default text 1'
}
},{
cls:'x-plain',
title:'Text 2',
layout:'fit',
items: {
xtype:'htmleditor',
id:'edENB',
fieldLabel:'edENB',
value:'Default text 2'
}
},{
cls:'x-plain',
title:'Text 3',
layout:'fit',
items: {
xtype:'htmleditor',
id:'edFRS',
fieldLabel:'edFRS',
value:'Default text 3'
}
},{
cls:'x-plain',
title:'Text 4',
layout:'fit',
items: {
xtype:'htmleditor',
id:'edENS',
fieldLabel:'edENS',
value:'Default text 4'
}
}]
}],

buttons: [{
text: 'Save',
handler: function(){
tab2.form.submit({
waitMsg:'Saving in progress...',
success: function(form, action) {
Ext.MessageBox.alert('Save', 'Done !');
},
failure: function(form, action) {
Ext.MessageBox.show({
title:'Error',
msg: 'Error while saving data.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR
});
}
});
}
}]
});
tab2.render(document.body);
});


Thanks for your help :)

Xos.

santosh.rajan
28 Nov 2007, 3:20 AM
I havent done this but you could try this. In submit add
params: tab2.form.getValues();

xos
28 Nov 2007, 3:30 AM
I havent done this but you could try this. In submit add
params: tab2.form.getValues();

Mmh, I tried to add this in the handler, before the submit, but it doesn't change the script behviour, unfortunately :(

It is like unless I have clicked all tabs, the default values are not loaded. So for instance if i load the page, go directly to "tab 3" and modify the contents, even if tab 1, 2 and 4 have default values, they are not initialized at the time i do the submit and then they are not passed to the PHP script during the HTTP post, only Tab 3 value is passed.

However, when I load the page, go to "tab 3", edit text into tab 3 htmleditor, then click on tab 1, 2 and 4 and finally click on submit, all the values are properly POSTed and i receive them correctly on my PHP script...

Anyway thank you for your help :)

Xos.

santosh.rajan
28 Nov 2007, 3:35 AM
fire an activate event for all the tabs!!:)

xos
28 Nov 2007, 5:19 AM
fire an activate event for all the tabs!!:)

I ended up doing this and it's working :)

Thank you !

Xos.

sfwalter
28 Nov 2007, 5:23 AM
I think the real problem is that by default the tab panel has defer rendering is set to false, which means the components on a tab do not get generated until you click on them. You can of course change this with the deferredRender property on the tab component.

scott.