Help needed !! Template Form

[fredleput]

Hi,
I'm building an application for my association and i use ext library since 3 weeks only.

here is my issue :

I have 3 tabs in my main layout. the third one contains in his left panel a grid and a toolbar. when you click on an element in the grid, i create 3 new panels in the right area. these panels contain a toolbar and two forms (the second form is not visible).


I use a template to create my form, then i render the form.

var t = new Ext.Template(
'<div class="x-box-tl">',
'<div class="x-box-tr">',
'<div class="x-box-tc">',
'</div>',
'</div>',
'</div>',
'<div class="x-box-ml">',
'<div class="x-box-mr">',
'<div class="x-box-mc">',
'<h3 style="margin-bottom:5px;">Modification</h3>',
'<div id="{id}">',
'</div>',
'</div>',
'</div>',
'</div>',
'<div class="x-box-bl">',
'<div class="x-box-br">',
'<div class="x-box-bc">',
'</div>',
'</div>',
'</div>'
);
t.append('contFormuModif', {id:'formuModif'});
formModifClient.render('formuModif');

the handler when the button "supprimer" is clicked. It suppress data from my mysql database and remove the div ('contFormuModif') which contains my template for the form. Then i recreate this div and append it into the center region of my Layout

[CODE]
// handler bouton supprimer
supprimeClient = function(e){
formIdClient.submit({
url: 'suppressionClient.php',
waitMsg: 'Suppression en cours...',
success: function(form, action){
// rafraichit liste des clients
dsListeClients.reload();
Ext.Msg.alert('Confirmation', 'Suppression effectu

[tryanDLS]

If you create the same element with the same ID, you're going to have problems. You need to remove the 1st element before recreating, or just hide it and reuse later.

[fredleput]

But i remove it first

// remove
layoutDroite.getRegion('center').remove('contFormuModif');
// div pour le formulaire de modif recreate
Ext.DomHelper.append('centreOnglet3', {tag:'div', id:'contFormuModif'}, false);
Ext.DomHelper.applyStyles('contFormuModif', {width:'640px', margin:'15px', border:'1px solid #ff0000'});
layoutDroite.getRegion('center').add(new Ext.ContentPanel('contFormuModif'));

[tryanDLS]

Look at the rendered HTML in firebug - is that div gone after the remove call?

[fredleput]

Hi nad thanks for your support.

with this code, the div 'contFormuModif' doesn't exist any more in the dom (i have the confirmation in firebug)

// remove
layoutDroite.getRegion('center').remove('contFormuModif');

[tryanDLS]

Use ext-all-debug.js to see where the error is occurring. Is it happening when you re-add the CP or when you try to reuse the template to add the form again?

[fredleput]

Hi, here's the error message that firebug gives to me

ct has no properties
getRawValue()ext-all-debug.js (line 20127)
isValid(true)ext-all-debug.js (line 20029)
(no name)(Object initialConfig=Object fieldLabel=Nom name=nom)ext-all-debug.js (line 21977)
each(function(), undefined)ext-all-debug.js (line 5770)
bindHandler()ext-all-debug.js (line 21976)
runTasks()ext-all-debug.js (line 5636)
[Break on this error] this.el = ct.createChild(cfg, position);

the Template seems to work (the div are recreated) but it stops just after he recreates the form.

here's the dom

<div id="contFormuModif" class="x-layout-active-content" style="border: 1px solid rgb(255, 0, 0); margin: 15px; width: 640px;">
<div class="x-box-tl">
<div class="x-box-tr">
<div class="x-box-tc"/>
</div>
</div>
<div class="x-box-ml">
<div class="x-box-mr">
<div class="x-box-mc">
<h3 style="margin-bottom: 5px;">Modification</h3>
<div id="formuModif">
<form id="formModifClient" class="x-form" method="post"/>
</div>
</div>
</div>
</div>
<div class="x-box-bl">
<div class="x-box-br">
<div class="x-box-bc"/>
</div>
</div>
</div>
</div>

[fredleput]

Hi, i'm back after 2 weeks on hollidays.

the error occurs when the form is rendering :
formModifClient.render('formuModif');

it seem's that he can't recreate the textField 'nom'. any idea ?