a dialogbox with multiple input fields?

[newbie]

hello,
I just started to use this nice library but have been into several bottlenecks.
I checked out most of the forums but couldn't find the answers.

Please be patient with me as I'm learning this now.
I'm trying to get a dialog box with several input fields. Nothing was shown in the dialog box. I think it was because of 'layoutdlg' in form_employee.render('layoutdlg'); but I don't know what to put it there for this case.


var dlg = new Ext.LayoutDialog("layoutdlg", {
autoCreate : true,
modal:true,
width:300,
height:200,
minWidth:100,
minHeight:100,
syncHeightBeforeShow: true,
shadow:true,
fixedcenter:true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});

var form_employee = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 175});

var employee_name = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'name',
width:190
});


form_employee.fieldset(
{legend:'Employee Edit'},
employee_name
);

form_employee.render('layoutdlg');
dlg.show();

I also tried to use the layout but I'm not sure how to put input textfield into the content panel.


var cDlgContentPanel = new Ext.ContentPanel('center');
var layout = dlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
layout.endUpdate();

If I may, I'd like to ask another quesiton. For Tree.TreePanel, is there any way to get the focus back to this control after it loses its focus? After a Confirm message box or even a TreeEditor gets the focus, the tree control loses the focus. The user has to click on the tree again to regain the focus. In IE, the shortkeys (created by tree.getEl().addKeyListener) on tree stop working and I can't get it work at all once the tree contol loses its focus. In firefox, if the user clicks on the tree, the shortkeys work fine. Any suggestions?

Thank you very much for your kind help in advance.

[mdissel]

You could try to render to:

layout.getRegion('center').getActivePanel()

Thanks
Marco

[newbie]

Thank you Marco for your reply.
I didn't get it work though.
Instead I searched and searched and found a way to do this.


var dlg = new Ext.BasicDialog("x-msg-box", {
autoCreate : true,
shadow: true,
draggable: true,
resizable:false,
constraintoviewport:false,
fixedcenter:true,
collapsible : false,
shim:true,
modal: true,
width:400, height:165,
buttonAlign:"center"
});

dlg.setTitle('Information Update Dialog');

bodyEl = dlg.body.createChild({
tag:"div",
html:'<table style="width:100%; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif;" border="0" cellspacing="0" cellpadding="0"><tr><td>Name</td><td><input size=45 style="padding-left:3px" name="ont-name"></input></td></tr><tr><td>Short Name&nbsp; </td><td><input size=45 style="padding-left:3px" name="ont-short-name"></input></td></tr><tr><td>Description</td><td><input style="padding-left:3px" size=45 name="ont-desc"></input></td></tr></table>'
});

var cTable = bodyEl.dom.firstChild.firstChild;//<table><tbody>
var cFirstText = cTable.childNodes[0].childNodes[1].firstChild;//<tr><td></td><td><input>
var cSecondText = cTable.childNodes[1].childNodes[1].firstChild;//<tr><td></td><td><input>
var cThirdText = cTable.childNodes[2].childNodes[1].firstChild;//<tr><td></td><td><input>

cFirstText.value = sName;
cSecondText.value = sShortName;
cThirdText.value = sDesc;

dlg.addKeyListener(27, dlg.hide, dlg);
dlg.addButton('OK',
function dlgOk()
{
sName = cFirstText.value;
sShortName = cSecondText.value;
sDesc = cThirdText.value;
dlg.hide();
}
, dlg);
dlg.addButton('Cancel', dlg.hide, dlg);

dlg.show();
cFirstText.focus();

I'm not sure this is a clean way but at least it works for me (except that in firefox, the cursor on the input text fields aren's shown ).

[mdissel]

You didn't add a center div..


dlg.getLayout().add('center', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Tab'}));
form_employee.render(dlg.getLayout().getRegion('center').getActivePanel().getEl());

you can hide the tabs in the LayoutDialog or use a BasicDialog.

Thanks

Marco