1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    booshan is on a distinguished road

      0  

    Default Creating Ajax tabs in center region of BorderLayout

    Creating Ajax tabs in center region of BorderLayout


    Gurus,

    I am having a tree on the west region. Whenever a node is clicked, I want to create a tab in the central region and it should fetch the contents by XHR. But currently I am doing it thru iframe as below, that makes it to download the js and css files in every iframe. Can someone let me know or point me to the resource how to do the same using Ajax.

    I saw some examples using ajax tabs in the docs. But it uses TabPanel, whereas center region is ContentPanel.

    Appreciate your help.

    Thanks
    Booshan

    Code:
    function showNodeDetails( node, event) {
    	var id = node.id;
    	var title = node.text;
    	var href = 'admin.do?action=show&id='+id;
    	var newpanel = 'dept-'+id;
    	if( !layout.showPanel( newpanel)) {
    		var newiframe = new Ext.ContentPanel(newpanel, {
    			title: title,
    			closable: true,
    			autoCreate: true,
    			fitToFrame: true
    		});
    		Ext.DomHelper.append(newpanel, {
    			tag: 'iframe',
    			src: href,
    			width: '100%',
    			height: '100%'
    		});
    		layout.add( 'center', newiframe);
    	}
    }

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    The documentation specifies how to load a panel's contents via XHR. You can auto-create the div for the new panel, then use the setUrl() method of the panel to fetch its contents.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    41
    Vote Rating
    0
    booshan is on a distinguished road

      0  

    Default


    Jeff,

    Thanks for your quick reply. It worked like a charm. But it is not executing the js script inside the content.

    I mean, when the tab is created it retrieves the content via XHR and updates the panel, but the js script in the XHR response doesn't get executed. How can I do that?

    Thanks in advance
    Booshan

  4. #4
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Again, from the docs, the setUrl() method uses the UpdateManager class under the hood. So, check the docs for that class:

    http://www.yui-ext.com/deploy/ext-1....teManager.html

    The setUrl()'s second argument can be a config object that'll be passed to the update() method of the UpdateManager class. One of the config options tells it to load scripts.

    mypanel.setUrl('someurl', { loadScripts: true});
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    61
    Vote Rating
    0
    greyknght1 is on a distinguished road

      0  

    Default This is what I did

    This is what I did


    Code:
    addNewCenterTab : function(url, TabTitle){
    			   		
    			   		// Create a new Div
    			   		var newCenterTabId = Ext.id();
    					var htmlContent = Ext.getDom('container').innerHTML;
    					htmlContent = htmlContent + '<div id=' + newCenterTabId + ' class="x-layout-inactive-content"></div>';
    					Ext.getDom('container').innerHTML = htmlContent;
    					
    					// Update the Layout
    					layout.beginUpdate();
    					layout.add('center', new Ext.ContentPanel(newCenterTabId, {title: ' ' + TabTitle, closable: true}));
    					layout.endUpdate();
    					
    					// Update the south with the new tab created message
    					updateSouth('New Tab ' + TabTitle + ' was created! ');									
    					
    					// Update the URL for the new tab
    					var newTab = Ext.get(newCenterTabId);
    					var updater = newTab.getUpdateManager({disableCaching:true, loadScripts: true});					
            			url = url + '?centerTab=' + newCenterTabId;
            			updater.update(url);
            			alert(url);
            			
    			   }
    I think it is pretty much what you are looking to do. Now I can't say this is the best example, but it works for me!

  6. #6
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    I ended up throwing away this approach, as there are memory leak problems with loading ajax data into tabs. What happens to all the javascript objects created etc. A few people seem to have gone with loading iframes into each tab rather than an ajax response. I'm trying this out at the moment, but it has it's own issues such as the need to reload the Ext library for each instance... good fun

    Chris

  7. #7
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by cdomigan View Post
    I ended up throwing away this approach, as there are memory leak problems with loading ajax data into tabs. [...]
    I'm sure that's news to a number of people here, myself included. Do you have data to back that up or is it based on something else?
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  8. #8
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    Quote Originally Posted by JeffHowden View Post
    I'm sure that's news to a number of people here, myself included. Do you have data to back that up or is it based on something else?
    No data, just my own (possibly incorrect) understanding of what might happen. Also this thread was fairly influential in my understanding.

    From the thread:

    "Using iframes give you more simplicity on destructing containing objects and you will not have any (huge or small) memory leaks while long running applications which has many objects to handle."

    If this is incorrect then please let me know - it would be great to be able to use a purely ajax solution, without resorting to iframes.

    Edit: I can see my initial statement was misleading. What I meant to say was "I understand there may be potential memory leak problems when loading ajax data into tabs and running attached scripts." I guess my worry is that after a while of loading (and closing) tabs with ajax content, and if the content runs it's own script/s and creates some objects, that when closing the tab these objects are not destroyed and so consequently you leak memory.

  9. #9
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by cdomigan View Post
    Edit: I can see my initial statement was misleading. What I meant to say was "I understand there may be potential memory leak problems when loading ajax data into tabs and running attached scripts." I guess my worry is that after a while of loading (and closing) tabs with ajax content, and if the content runs it's own script/s and creates some objects, that when closing the tab these objects are not destroyed and so consequently you leak memory.
    That is definitely understandable, but I'm certain that some extensive testing would be required to determine if that's really an issue or not. As far as I'm aware, there's nothing to indicate that is actually the case (if it were it'd affect pretty much everything that used AJAX to load data/scripts) in every library.

    If you have the option, loading data/scripts via AJAX will have far less overhead than creating iframes as the browser must create an entire window and document object models for every iframe you create. I would only use them as a last resort.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  10. #10
    Ext JS Premium Member cdomigan's Avatar
    Join Date
    Mar 2007
    Posts
    148
    Vote Rating
    1
    cdomigan is on a distinguished road

      0  

    Default


    Thanks Jeff, that makes sense.

Similar Threads

  1. [OPEN] Yui menus only visible in center region in IE?
    By jarrod in forum Ext 1.x: Bugs
    Replies: 6
    Last Post: 1 Nov 2008, 4:20 AM
  2. How I can move a ContentPanel from region center to east
    By kubens in forum Ext 2.x: Help & Discussion
    Replies: 13
    Last Post: 29 Mar 2007, 5:15 AM
  3. Add Tabs to center region of nested layout
    By subhav in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 12 Mar 2007, 2:53 AM
  4. Need a BorderLayout with no center
    By CableDawg in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 25 Jan 2007, 1:00 AM
  5. creating tabs
    By KuN in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 27 Oct 2006, 9:24 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