PDA

View Full Version : Render form in basic dialog



AlexJG
19 Apr 2007, 11:29 AM
I am trying to render an Ext form in a BasicDialog, something like



htmlElement = Ext.DomHelper.append(document.body,{id : 'rrttest'}, true);
extForm.render('rrttest');
dialog = new Ext.BasicDialog('rrttest', {
autoTabs:false,
width:520,
height:330,
shadow:false,
minWidth:300,
minHeight:250,
closable: true,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);
dialog.show(document.body);


extForm is the second Form example from the docs.

I am trying to create a new element ('rrttest'), render the form in it and then use it for the dialog contents. the 'rrttest' is just a test id at he moment.

The problem is that the form is being displayed outside the dialog. i have started to look at the DOM in FB but was wondering if

1) This will work
2) Anyone has tried this

Thanks in advance

tgo
19 Apr 2007, 11:53 AM
Hi,
I have done something like this and I believe other must have too ...
Look at this post http://extjs.com/forum/showthread.php?t=4403.

It helped me quite a bit. The clincher for me was that in the dialog you must add a div to attach your form to. Something like:


dialog.body.dom.innerHTML="<div id='loginFormId'></div>";
myform.render('loginFormId');


Worked for me, but be careful I am new to this stuff ... ;)

--tgo

AlexJG
19 Apr 2007, 12:09 PM
That sorted it

Thanks

amon
19 Apr 2007, 1:19 PM
It's working for me, I use it in a real application. :)


var userEditForm = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 85,
url:'index.php',
reader: new Ext.data.XmlReader({record:'user',id:'user_login'}, [{name:'user_login',mapping:'user_login'}])});

userEditForm.fieldset(
{legend:'Data'},
new Ext.form.TextField({
fieldLabel: 'Username',
name: 'user_login',
allowBlank:false,
width:190
})
);

userEditForm.render('form-ct3');
var usereditdialog = new Ext.BasicDialog('uedialog',{ width:690, height:374, modal:true, shadow:true, resizable:false, closable:true, autoCreate:true});


And the HTML:

[HTML]<div id="uedialog" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Felhaszn

AlexJG
19 Apr 2007, 1:36 PM
Amon

Thanks for that. The difference between yours and mine in that I have no markup to render the dialog to. I am creating everything on the Fly.

I have got it all working now although I am still not 100% sure its the right way to do it do am now reading some documentation (source code ;) )

26 Apr 2007, 5:16 AM
Hi

I tried to use your code and it works fine in FireFox but it does not work in Internet Explorer 6.

The problem is that the text field does not appear in the dialog (BasicDialog)...

Any idea? :-?

26 Apr 2007, 7:33 AM
Sorry, it works... My fault...

:(