Dialog Content duplicating itself

[mfw24]

I have a grid that loads some information about users.

When i click an 'add user' button, it opens up a dialog window with a form and submit button.

When I close the window (i'm destroying the dialog) and then click 'add user' button, the form duplicates itself within the dialog window.

It appears that the destroy function is not removing this information so that new information on the form appears only once.
Can anyone please help me or point me in the right direction?


My createdialog function looks like this:
---------------------
function createNewDialog(dialogName) {

var thisDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width: 550,
height: 450,
shadow:true,
center: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
thisDialog.addKeyListener(27, thisDialog.destroy, thisDialog);
thisDialog.addButton('Cancel', function() {thisDialog.destroy();});

return thisDialog;
};

---------------------------
I've tried hiding and destroying the dialog box. Same thing happens.

[devnull]

you would need to destroy all contents of the dialog as well to use this method.
I would highly reccommend keeping the dialog and just hide/show it as needed, this will make for a more responsive app.

[mfw24]

simply hiding the dialog doesn't seem to resolve this problem. It doesn't seem to acknowledge that the dialog already exists (stepping through it in firebug doesn't pass the check (if !aAddInstanceDlg). Clicking 'add user' call this function:


-----------------
function doAdd(){
var aAddInstanceDlg;

if (!aAddInstanceDlg)
{
aAddInstanceDlg = createNewDialog("a-addInstance-dlg");
aAddInstanceDlg.addButton('Save', function() {
fs.submit();
aAddInstanceDlg.hide();
ds.reload();
});

var layout = aAddInstanceDlg.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('a-addInstance-inner', {title: 'Create user'}));


var fs = new Ext.form.Form
({
method: 'POST',
labelAlign: 'right',
labelWidth: 180,
waitMsgTarget: 'box-bd',
url:'adduser.aspx'
});

fs.fieldset(
{legend:'User Information'},
new Ext.form.TextField({
fieldLabel: 'Login ID',
name: 'loginID',
allowBlank:false,
width:180
}),

new Ext.form.TextField({
fieldLabel: 'Password',
name: 'password',
id:'password',
allowBlank:false,
width:180
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:180
}),
new Ext.form.Checkbox({
boxLabel:'Admin?',
name:'admin',
width:'auto'
})

);

fs.render('form-ct');
layout.endUpdate();
}
aAddInstanceDlg.show();
};
----------------------------------

Do you happen to know why the aAddInstanceDlg doesn't exist after i hide it?


btw my CreateNewDialog function looks like this:


------------------
function createNewDialog(dialogName) {

var thisDialog = new Ext.LayoutDialog(dialogName, {
modal:true,
autoTabs:true,
proxyDrag:true,
resizable:false,
width: 550,
height: 450,
shadow:true,
center: {
autoScroll: true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false
}
});
thisDialog.addKeyListener(27, thisDialog.hide(), thisDialog);
thisDialog.addButton('Cancel', function() {thisDialog.hide();});

return thisDialog;
};

[mfw24]

i just read a few posts about this (sorry about repeating the question), but none of the solvs seem like good ones. I think i read about having to unload the listeners, blah blah blah...

there must be a simpler way...

what about simply checking to see if the dialog is rendered already (and just hidden). Is this possible? I tried grabing the dialog and then checking if the rendered attribute is true. The problem i have with this is that on the initial state, the layout doesn't exist and doesn't have properties....so it appears somehow i need to make the layout global so that it doesn't fall out of scope when i attempt the check to see if it already exists. Am i on the right path? If so, can someone please guide me a bit to how to implement this?

Thank you!

[John Sourcer]

Have you tried declaring your dialog var globally?

[fay]

You've made aAddInstanceDlg local to doAdd() - it will considered to be "new" and "undefined" everytime doAdd() is called. Here's an example of *how* to do it with a BasicDialog - it shouldn't be too hard to change yours for the LayoutDialog:

<script>  
var TestDlg = function(){

  var dlgLogin, frmLogin;
  
  return {     
    init : function(){ 
    },
    
    doAdd: function(){      
      if (!dlgLogin)
      {
        dlgLogin = new Ext.BasicDialog('login-dlg', {autoCreate: true, title: 'Login', height: 160, width: 300, modal: true, closable: true, collapsible: false});
        dlgLogin.addButton('Login', dlgLogin.hide, dlgLogin);
        dlgLogin.addButton('Cancel', dlgLogin.hide, dlgLogin);                              

        frmLogin = new Ext.form.Form({}); 
        frmLogin.add(
          new Ext.form.TextField({fieldLabel: 'Username', name: 'username', width: 160}),
          new Ext.form.TextField({fieldLabel: 'Password', name: 'password', width: 160, inputType: 'password'})
        );                
        frmLogin.render(dlgLogin.body);                 
      };
      dlgLogin.show(); 
    }
  };    
}();
Ext.onReady(TestDlg.init, TestDlg); 
</script>

</head>

<body>   
<a href="javascript:TestDlg.doAdd()">test</a> 
</body>
</html>

[mfw24]

yes; i think i see what you mean now. I will try modifying tonight.

Thank you!

[mfw24]

Would you happen to know why i would get "UserDlg has no properties" on this line of code:

Ext.onReady(UserDlg.init, UserDlg, true); 

My function is built the same way you mentioned.