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

      0  

    Default building dialog with markup.. ajax messes it up

    building dialog with markup.. ajax messes it up


    hi, the code below is a page brought into my app using ajax. i would like to build the dialog with markup- but every other time i bring in the page, the dialog markup is in the dom twice which causes a problem- (my content appears not to update, but for example i searched the dom and there were 2 instances of a div 'objDialog_west'). how can i make sure that does not happen?

    Code:
    <script language="javascript">	
    if(!isDefined('objLayoutDialog')) {
    	objLayoutDialog = function(){
    	   
    		var objDialog,dlgEl;
    		
    		return {
    			init : function(){
    				objDialog = new YAHOO.ext.LayoutDialog("mkpLayoutDialog", { 
    						   modal:true,
    						   //autoCreate:true,
    						   //title:'Test Dialog',
    						   width:600,
    						   height:400,
    						   shadow:true,
    						   minWidth:300,
    						   minHeight:300,
    						west: {
    							split:true,
    							initialSize: 150,
    							minSize: 100,
    							maxSize: 250,
    							titlebar: true,
    							collapsible: true,
    							animate: true
    						},
    						center: {
    							autoScroll:true,
    							tabPosition: 'top',
    							closeOnTab: true,
    							alwaysShowTabs: true
    						}
    				   });
    					objDialog.addButton('Close', objDialog.hide, objDialog);
    				  
    					objLayout = objDialog.getLayout();
    					objDialog.beginUpdate();
    						objLayout.add('west', new YAHOO.ext.ContentPanel('objDialog_west', {title:'west title'}));
    						objLayout.add('center', new YAHOO.ext.ContentPanel('objDialog_center', {title:'content title'}));
    					objDialog.endUpdate();
    					
    					dlgEl = getEl('mkpLayoutDialog');
    					document.body.insertBefore(dlgEl.dom, document.body.firstChild);
    			},
    			
    			showDialog : function(elm){
    				if(!objDialog){
    					this.init();
    				}
    				winnCode.getContent('objDialog_west','test.cfm');
    				winnCode.getContent('objDialog_center','test.cfm');
    				objDialog.show(elm.dom);
    			}
    		};
    	}();
    }
    </script>
    
    <input type="button" id="show-dialog-btn" value="Show Layout Dialog" onClick="objLayoutDialog.showDialog(this)" /> 
    
    
    <div id="mkpLayoutDialog" style="visibility:hidden;">
    	<div class="ydlg-hd">Layout Dialog</div>
    	<div class="ydlg-bd">
    		<div id="objDialog_west" class="ylayout-inactive-content">
    			
    		</div>
    		<div id="objDialog_center" class="ylayout-inactive-content">
    			
    		</div>
    	</div>
    </div>

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

      0  

    Default


    You built the layoutdialog and then you manually inserted into the dom again.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    PurpleNurple is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    You built the layoutdialog and then you manually inserted into the dom again.
    you mean with

    document.body.insertBefore(dlgEl.dom, document.body.firstChild);

    ?

    do you not need to do that for the 'modal shadow' to work properly?

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

      0  

    Default


    No. It's likely that your shadow is working now b/c the shadow from the 2nd dialog that you inserted into the dom is appearing to mask the first dialog that's not rendered correctly.

    Your dialog should be rendered to the body element, not some nested element in your markup. See the faq http://yui-ext.com/manual/faq#i_m_us...an_t_access_it

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    PurpleNurple is on a distinguished road

      0  

    Default


    the line
    Code:
    if(!isDefined('objLayoutDialog')) {
    should make sure the dialog is only rendered once (i checked that it is working properly). i get what your saying about the markup being rendered to the body element, that is the purpose of the insertBefore call. if i get what you're saying, i can not bring in any dialog markup with ajaxed pages? this is what seems to be happening after watching with firebug for a while.

    1) main layout loads
    2) the page i pasted below- gets requested in an async call into the center panel of my main layout.
    3) dialog does not exist so the insertBefore call pushes it to the body tag. all is good and layout works
    4) for whatever reason, i request that same page again in my center panel, dialog exists so js object is not re-rendered, BUT the dialog markup is still in the content of the ajax request (so now there is 1 dialog below the body tag (where it should be), and 1 dialog at the spot it came in the request (cuz it was not moved- already was moved).

    does this make sense? how can i prevent this condition?

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

      0  

    Default


    You need to re-think what you are doing.

    You are pulling in across the net, code to create a dialog and a layout...

    Every time you want this dialog to pop up!

    Create the dialog once in the main page, and just load the dialog's body through Ajax.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    PurpleNurple is on a distinguished road

      0  

    Default


    yeah i've been given that advice a few times now, and i have tried it. problem i had was it seemed to be buggy. the first thing i tried was deleting a tab in the dialog, re-showing the dialog threw an error. then there seems to be no way to 'destroy' a dialog's layout (i know you can remove a contentPanel but, i would have to have knowledge of what the current content panels are, right?). it seems in order to be able to take this advice it comes with me having to keep some sort of global JS object that keeps track of the dialogs and the content panel ID's inside of them.

    i guess that is the direction i'll go, registering each dialog in some object as they are requested and also registering the ID's of the content panels. (so i know which ones to remove when new content is requested) but then of course i'll have to send the panel ID to the server on each ajax request so it can build the appropriate code to insert the new layout (i think you suggested this to me in another thread) it means a bunch of extra work for something i was trying to avoid, but oh well- thanks for your help thus far.

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

      0  

    Default


    Dialogs are all registered with the DialogManager.

    You will be using LayoutDialogs if you are adding ContentPanels.

    LayoutDialogs offer access to their Layout object.

    And from Layout objects, you can access all the Regions and Tabs. You can remove and delete the tabs using the standard methods.

    You can Ajax-load content into a newly created, hidden ContentPanel that you've added (using DomHelper) with class "ylayout-inactive-content", and then add that to the Region.

    There's loads of ways to do it. Don't get confused!

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    29
    Vote Rating
    0
    PurpleNurple is on a distinguished road

      0  

    Default


    ok, maybe i'm getting the hang of this, let me know if you think i'm on the right track or if this can be improved

    here is the main page
    Code:
    var LayoutDialog = function(){
        
        var dialog, showBtn;
        
        // return a public interface
        return {
            init : function(){
                 if(!dialog){
                    dialog = new YAHOO.ext.LayoutDialog("lytDialog", { 
                            modal:true,
                            autoCreate:true,
                            title:'none',
                            width:600,
                            height:400,
                            shadow:true,
                            minWidth:300,
                            minHeight:300,
                            west: {
    	                        split:true,
    	                        initialSize: 150,
    	                        minSize: 100,
    	                        maxSize: 250,
    	                        titlebar: true,
    	                        collapsible: true,
    	                        animate: true
    	                    },
    	                    center: {
    	                        autoScroll:true,
    	                        tabPosition: 'top',
    	                        closeOnTab: true,
    	                        alwaysShowTabs: true
    	                    }
                    });
                    dialog.addButton('Close', dialog.hide, dialog);
                    
                    //create the west and center panels
                    var layout = dialog.getLayout();
                    dialog.beginUpdate();
    	                layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West',autoCreate:true}));
    		            layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Inner Tab',autoCreate:true}));
    	            dialog.endUpdate();
                }
            },
            
            getLayout : function(){
            	return dialog.getLayout();
            },
         
            setTitle : function(str){
            	dialog.setTitle(str);
            },
            
            showDialog : function(elm){
                dialog.show(elm.dom);
            }
        };
    }();
    
    YAHOO.ext.EventManager.onDocumentReady(LayoutDialog.init, LayoutDialog, true);
    here is the code brought in thru an ajax request, have built 2 different dialogs with this as a test

    Code:
    <script language="javascript">
    	showPrefDialog = function(elm){
    		//set title
    		LayoutDialog.setTitle('new layout title');
    		//get layout object
    		tLayoutObject = LayoutDialog.getLayout();
    		//get the panels
    		westPanel = tLayoutObject.getRegion('west').getPanel('west');
    		centerPanel = tLayoutObject.getRegion('center').getPanel('center');
    		
    		//update panel title
    		westPanel.setTitle('updated title')
    		//update panel content
    		westPanel.setUrl('/working/winn/test.cfm?caller=prefDialog',{scripts:true});
    		westPanel.refresh();
    		
    		//update panel title
    		centerPanel.setTitle('updated title2')
    		//update panel content
    		centerPanel.setUrl('/working/winn/test.cfm?caller=prefDialog',{scripts:true});
    		centerPanel.refresh();
    		
    		//show the dialog
    		LayoutDialog.showDialog(elm);
    	}
    	
    	showProfDialog = function(elm){
    		//set title
    		LayoutDialog.setTitle('new layout title');
    		//get layout object
    		tLayoutObject = LayoutDialog.getLayout();
    		//get the panels
    		westPanel = tLayoutObject.getRegion('west').getPanel('west');
    		centerPanel = tLayoutObject.getRegion('center').getPanel('center');
    		
    		//update panel title
    		westPanel.setTitle('updated title')
    		//update panel content
    		westPanel.setUrl('/working/winn/test.cfm?caller=profDialog',{scripts:true});
    		westPanel.refresh();
    		
    		//update panel title
    		centerPanel.setTitle('updated title2')
    		//update panel content
    		centerPanel.setUrl('/working/winn/test.cfm?caller=profDialog',{scripts:true});
    		centerPanel.refresh();
    		
    		//show the dialog
    		LayoutDialog.showDialog(elm);
    	}
    
    </script>
    
    <input type="button" id="show-dialog-btn" value="Show Pref Dialog" onClick="showPrefDialog(this)" />
    <input type="button" id="show-dialog-btn" value="Show Prof Dialog" onClick="showProfDialog(this)" />
    this seems to be working no problems.

    i think it could be improved by adding all available regions (north,west,south,east,center) and then just showing and setting content in the panels that i need when i want to show the dialog.

    thanks for the help!

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

      0  

    Default


    OK, you're building your LayoutDialog as a singleton on page load good.

    But the content you pull in thru ajax, then pulls in two more pages (two setUrl() calls). It's a bit inefficient.

    I'd be inclined to have more knowledge built into that LayoutDialog object. Add methods to update the west panel, and update the east panel. Make IT know what it needs to load, and have methods to load itself.

    Then any client scripts can be very small and just tell it what to do.

Similar Threads

  1. Basic Dialog grab content via AJAX
    By vpizzle in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 20 Mar 2007, 3:52 PM
  2. Menu from Markup
    By alindsay55661 in forum Community Discussion
    Replies: 2
    Last Post: 24 Feb 2007, 6:10 PM
  3. issue building yui-ext
    By sjivan in forum Sencha Cmd
    Replies: 4
    Last Post: 11 Dec 2006, 6:44 AM
  4. Building YUI-ext from SVN
    By hunkybill in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 24 Nov 2006, 5:03 PM

Thread Participants: 2