Hybrid View

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    19
    Vote Rating
    0
    khnle is on a distinguished road

      0  

    Default Multiple BasicDialog instances on same page

    Multiple BasicDialog instances on same page


    Is it possible to have multiple BD instances on the same page? For example, if I have in the HTML:

    Code:
    <div id='logout-dlg' style='visibility:hidden;overflow:hidden;position:absolute;top:0px;'>
    	<div class='ydlg-hd'>Logout</div>
            ...
    </div>
    
    <div id='login-dlg' style='visibility:hidden;overflow:hidden;position:absolute;top:0px;'>
    	<div class='ydlg-hd'>Login</div>
            ...
    </div>
    and in the JavaScript file:

    Code:
    logoutDlg = new YAHOO.ext.BasicDialog("logout-dlg", { modal:true, ... });
    						
    loginDlg = new YAHOO.ext.BasicDialog("login-dlg", { modal:true, ... });

    It would seem like only the first one that appears in the HTML can work correctly while the second dlg even fails to show. Does anyone have any idea? I know it's possible since I have seen wayki.com does it. Please help. Thanks

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Should work. You're going to have to post up a link.

  3. #3
    Ext User alanwilliamson's Avatar
    Join Date
    Mar 2007
    Location
    Scotland
    Posts
    61
    Vote Rating
    0
    alanwilliamson is on a distinguished road

      0  

    Default


    I have many BasicDialog boxes all working beautifully within the same page.

    Make sure you haven't accidentally copy'n'pasted and reused an ID that should be unique between them all. Also be careful you aren't stepping over variables when you create the second dialog instance.

    I have wrapped mine in separate objects, so i don't get variable collision.

    But as the "Animal" suggested, post the full code so we can see if there is something obvious.

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    19
    Vote Rating
    0
    khnle is on a distinguished road

      0  

    Default


    Awesome. What a great community :-)

    In my HTML:

    Code:
    <head>	
    	<title>Vi and Hai Wedding - December 16, 2006</title>
    	<link rel="stylesheet" href="css/mainPage.css" type="text/css" /> 
    	<link rel="stylesheet" href="css/formStyles.css" type="text/css" />
    	<link rel="stylesheet" href="css/reset-min.css" type="text/css" />
    	<link rel="stylesheet" href="css/resizable.css" type="text/css" />
    	<link rel="stylesheet" href="css/basic-dialog.css" type="text/css" />
      	
    	<script type="text/javascript" src="yui/utilities.js"></script>
    	<script type="text/javascript" src="yui-ext/yui-ext.js"></script>
    				
    	<script type="text/javascript" src="js/wedding.js"></script>       	
        
    	<script type="text/javascript">    	
    		// <![CDATA[		
    		YAHOO.util.Event.on(window, 'load', function() { pragmaticobjects.wedding.init(); });		
    		// ]]>
    	</script>		
    </head>
    <body>
    ...
    <div id="login-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
    	<div class="ydlg-hd">Guest Login</div>
    	<div class="ydlg-bd">
    		<div id="logonForm" class="form">
    		<form id="signonForm" method="POST">
    		<fieldset>
    			<legend>Guest Login</legend>
    			<p id="login-title" class="message"></p>			
    			<br class="clearBoth" />
    			<label class="fieldLabel" for="guest_id">Guest Id:</label>
    			<input type="text" style="float:left" id="id" name="id" value=""/>
    			<br class="clearBoth" />
    			<br class="clearBoth" />
    	    <label class="fieldLabel" for="password">Password:</label>
    			<input type="password" style="float:left" id="password" name="password" value=""/>			
    		</fieldset>		
    		</form>				
    	</div>	
    </div>
    
    <div id="logout-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
    	<div class="ydlg-hd">Guest Logout</div>
    	<div class="ydlg-bd">
    		<div id="logoutForm" class="form">
    		<form id="signoffForm" method="POST">
    		<fieldset>
    			<legend>Guest Logout</legend>
    			<p id="logout-title" class="message">Please confirm that you want to logout</p>
    		</fieldset>
    		</form>
    	</div>	
    </div>
    </body>
    and in my Javascript file:

    Code:
    var pragmaticobjects = {};
    pragmaticobjects.wedding = {
    	$C : Object,
    	$D : Object,
    	$DEx : Object,
    	$E : Object,	
    	$  : Object,
    	$P : Object,
    	active : '',
    	localId : '',
    	loginDlg : Object,
    	logoutDlg : Object,
    	init: function() {
    		$C = YAHOO.util.Connect;
    		$D = YAHOO.util.Dom;
    		$DEx = YAHOO.util.Dom.Ex;
    		$E = YAHOO.util.Event;
    		$  = $D.get;
    		$P = pragmaticobjects.wedding;						
    		
    		logoutDlg = new YAHOO.ext.BasicDialog("logout-dlg", { 
    			modal:true, autoTabs:true, width:250, height:150, fixedcenter:false, shadow:true, minWidth:250, minHeight:150, resizable: true
    		});
    		logoutDlg.hideOnSubmit = false;
    		
    		logoutDlg.addKeyListener(27, logoutDlg.hide, logoutDlg);
    		logoutDlg.addKeyListener([13,10], $P.logout, logoutDlg);
    		logoutDlg.addButton('Close', logoutDlg.hide, logoutDlg);
    		logoutDlg.addButton('Logout', $P.logout, logoutDlg);
    		
    		
    		loginDlg = new YAHOO.ext.BasicDialog("login-dlg", { 
    			modal:true, autoTabs:true, width:400, height:220, fixedcenter:true, shadow:true, minWidth:400, minHeight:220, resizable: true
    		});
    		loginDlg.hideOnSubmit = false;
    		
    		loginDlg.addKeyListener(27, loginDlg.hide, loginDlg);
    		loginDlg.addKeyListener([13,10], $P.login, loginDlg);
    		loginDlg.addButton('Close', loginDlg.hide, loginDlg);
    		loginDlg.addButton('Login', $P.login, loginDlg);
            },
            ...
    }
    This JavaScript file also has some other event listeners where I simply show or hide the dialogs as follow:

    Code:
    loginDlg.show();
    logoutDlg.show();
    If you really want to see it live, I would need a little extra time to upload these files. For now, I think it's obvious that I'd like to have a login dialog and logout dialog box. I have 2 links on the HTML, 2 event listeners listening, where each evt listener call the appropriate show() method.

    Please let mw know if I would need to upload. Thanks

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Go into Firebug, and inspect the DOM.

    There's a problem with your HTML markup and the logout-dlg is ending up inside the login-dlg

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Try this as your login dialog:

    Code:
    <div id="login-dlg" style="visibility:hidden;overflow:hidden;position:absolute;top:0px;">
       <div class="ydlg-hd">Guest Login</div>
       <div class="ydlg-bd">
          <div id="logonForm" class="form">
          <form id="signonForm" method="POST">
          <fieldset>
             <legend>Guest Login</legend>
             <p id="login-title" class="message"></p>         
             <br class="clearBoth" />
             <label class="fieldLabel" for="guest_id">Guest Id:</label>
             <input type="text" style="float:left" id="id" name="id" value=""/>
             <br class="clearBoth" />
             <br class="clearBoth" />
           <label class="fieldLabel" for="password">Password:</label>
             <input type="password" style="float:left" id="password" name="password" value=""/>         
          </fieldset>      
          </form>    
          </div>        
       </div>   
    </div>

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    If you're going to use forms inside your dialog, this isn't going to work b/c the dialog creation process will move the dialog elements outside your form tags. Use Firebug or WebDeveloper to see the really HTML/Dom structure when the dialog is created.

    To avoid this, you need to use the form element's id as the id for the Dialog constructor. There are samples of this in the forum.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    19
    Vote Rating
    0
    khnle is on a distinguished road

      0  

    Default


    Animal, you're the man, .. I mean animal. Just kidding, but the markup did get screwed-up. Thanks to tryanDLS too.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I haven't seen that problem. I'm looking at that code in Firebug's DOM inspector now, and the form element is right there inside the ydlg-bd element.

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    19
    Vote Rating
    0
    khnle is on a distinguished road

      0  

    Default


    Thanks Animal. I will need to get Firebug. Also thanks alanwilliamson. BTW, Alan, were you also heavily involved in the Thinlet project the the past? I thought I recognize your name from a while back...

Similar Threads

  1. Please Help...Multiple grid on the same page
    By khanh3m in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 1 Aug 2012, 7:56 PM
  2. Problem with column width with multiple grids on a page
    By SLerman in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 28 Feb 2007, 8:22 AM
  3. Column width problem when multiple grid on same page
    By Greeens in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 9 Feb 2007, 7:44 AM
  4. Multiple Grids on a Page, Column Adjust Problem?
    By rooster in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jan 2007, 1:42 PM
  5. Single or multiple page layout?
    By seldon in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 23 Dec 2006, 3:22 AM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi