Results 1 to 8 of 8

Thread: Dialog Content duplicating itself

  1. #1
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default Dialog Content duplicating itself

    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.
    Attached Images Attached Images

  2. #2

    Default

    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.

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default still not working

    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;
    };

  4. #4
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default

    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!

  5. #5

    Default

    Have you tried declaring your dialog var globally?

  6. #6
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750

    Default

    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:

    Code:
    <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>

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default thanks

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

    Thank you!

  8. #8
    Ext User
    Join Date
    May 2007
    Posts
    69

    Default Error Msg

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

    PHP Code:
    Ext.onReady(UserDlg.initUserDlgtrue); 


    My function is built the same way you mentioned.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •