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

      0  

    Default Load a page into a ContentPanel

    Load a page into a ContentPanel


    Hi, i want to load a page into a ContentPanel when i click on a link but all things i tried were not enought. Here is my code:

    Code:
    <html>
    <head>
      <title>InstantSite</title>
    	
        <script type="text/javascript" src="js/utilities.js"></script>
        <script type="text/javascript" src="js/yui-ext.js"></script>
    
        <link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/tabs.css"/>
    	<link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/layout.css"/>
    	<style type="text/css">
    	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
    	#header{
    	    background: url(images/header-bar.gif) repeat-x bottom;
    	    border-bottom: 1px solid #083772;
    	    padding:5px 4px;
    	    color:white;
    	    font:normal 8pt arial,helvetica;
    	}
    	#footer{
    	    background: url(images/header-bar.gif) repeat-x bottom;
    	    border-top: 1px solid #083772;
    	    padding:2px 4px;
    	    color:white;
    	    font:normal 8pt arial,helvetica;
        }
    	#nav {
    	}
    	#nav, #inner1, #inner2 {
    	    padding:10px;
    	}
    	#content p {
    	    margin:5px;
    	}
    	#nav li {
    	    padding:2px;
    	    padding-left:10px;
    	    background-image:url(images/bullet.gif);
    	    background-position: -3px 6px;
    	    background-repeat: no-repeat;
    	    font-size:8pt;
    	    display: block;
        }
        .ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
            border:0px none;
        }
        #content .ylayout-panel-south{
            border-top:1px solid #aca899;
        }
        #content .ylayout-panel-center{
            border-bottom:1px solid #aca899;
        }
        </style>
    	<script type="text/javascript">
    	Example = function(){
    	        return {
    	            init : function(){
    	               var layout = new YAHOO.ext.BorderLayout(document.body, {
    	                    north: {
    		                    split:false,
    		                    initialSize: 25,
    		                    titlebar: false
    		                },
    	                    west: {
    	                        split:true,
    	                        initialSize: 150,
    	                        titlebar: true,
    	                        collapsible: true,
    	                        minSize: 100,
    	                        maxSize: 200,
    	                        //collapsed: true,
    	                    },
    	                    south: {
    		                    split:false,
    		                    initialSize: 25,
    		                    titlebar: false
    		                },
    	                    center: {
    	                        autoScroll: false
    	                    }
    	                });
    	                layout.beginUpdate();
    
    	                layout.add('north', new YAHOO.ext.ContentPanel('header'));
    	                layout.add('west', new YAHOO.ext.ContentPanel('menu', {title: 'Menu', fitToFrame:true, closable:false}));
    	                var innerLayout = new YAHOO.ext.BorderLayout('content', {
    	                    south: {
    	                        split:true,
    	                        initialSize: 200,
    	                        minSize: 100,
    	                        maxSize: 300,
    	                        autoScroll:true,
    	                        collapsible:true,
    	                        titlebar: true,
    	                        useShim:true,
                    	        //collapsed: true
    	                    },
    	                    center: {
    	                        autoScroll:true
    	                    }
    	                });
    	                innerLayout.add('south', new YAHOO.ext.ContentPanel('inner1', "Detalle"));
    	                innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2'));
    	                layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
    	                layout.add('south', new YAHOO.ext.ContentPanel('footer'));
    	                layout.endUpdate();
    	           }
    	     }
    
    	}();
    	YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
    	</script>
    </head>
    <body class="ytheme-gray">
    <div id ="container">
      <div id="header" class="ylayout-inactive-content">InstantSite</div>
      <div id="menu" class="ylayout-inactive-content">
          <ul>[*]
    			<a href="#" onClick="javascript: getPanel(inner2).getURL('www.google.com')">
    			[img][/img]Link 1</a>
    		
    	[*]
    			<a href="#">
    			[img][/img]Link 2</a>
    		[/list]  </div>
      <div id="content" class="ylayout-inactive-content"></div>
      <div id="inner1" class="ylayout-inactive-content">
            
    
    DETAIL</p>
      </div>
      <div id="inner2" class="ylayout-inactive-content" name="inner2">
            
    
    I WANT TO LOAD A PAGE HERE !!!</p>
      </div>
      <div id="footer" class="ylayout-inactive-content">Copyright 2007 - GPL</div>
    </div>
     </body>
    </html>

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

      0  

    Default


    So, what did you try? There's no sign of anything attempting to load content in that code.

    Post some code, and we can help you hammer it into shape.

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

      0  

    Default


    That's the problem, i don't know where to put the code. I tried something like getURL() but nothing happended. I want to push on the links in the west ContentPanel and the 'inner2' ContentPanel get updated.

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

      0  

    Default


    OK. Post your code.

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

      0  

    Default


    I updated the code in the first post near LINK 1

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

      0  

    Default


    Mmm.

    And what happens when the browser attempts to execute

    Code:
    getPanel(inner2).getURL('www.google.com')
    :?: :?: :?: :?:

    * Where is getPanel defined?

    * Whatever that returns, does it have a getURL method?

    * You cannot use XMLHttpRequests (That's "Ajax") to read from another server than the one the page came from. If you want to see google.com in a ContentPanel, you must well, and this is another thing about your code... create a ContentPanel from an iframe, and set its src attribute to the URl you want to see.

    * Why do you want to load google? Just playing?

  7. #7
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,087
    Vote Rating
    113
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    I believe the 2 functions you were looking for are findPanel and setURL as referenced in the documentation. However as Animal noted you cannot use XHR requests to go to other sites. You will have to use an iframe in your 'inner2' content panel.

    Where you add 'center' to your innerLayout use the following code:
    innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2', {fitToFrame:true, autoCreate: {tag: 'iframe', src: 'http://www.google.com'}}));

    and remove your div with an id of inner2 from your markup. (You are going to create this div on the fly)

    This will allow you to start at http://www.google.com

    You could assign this an id and then simply set the src to something different when you click on one of the links on the nav panel.

    You may want to maintain a reference to your layout within your example class by creating a private variable. This way you can add more functions to your class to manipulate the layout. For a complete explaination read through this post and the links in it:
    http://www.yui-ext.com/forum/viewtopic.php?t=536

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

      0  

    Default


    Thanks aconran, your help was too usefull.

    My code is now working and is like this

    Code:
    <html>
    <head>
      <title>InstantSite</title>
    	
        <script type="text/javascript" src="js/utilities.js"></script>
        <script type="text/javascript" src="js/yui-ext.js"></script>
    
        <link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/tabs.css"/>
    	<link rel="stylesheet" type="text/css" href="js/yui-ext.0.33/resources/css/layout.css"/>
    	<style type="text/css">
    	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
    	#header{
    	    background: url(images/header-bar.gif) repeat-x bottom;
    	    border-bottom: 1px solid #083772;
    	    padding:5px 4px;
    	    color:white;
    	    font:normal 8pt arial,helvetica;
    	}
    	#footer{
    	    background: url(images/header-bar.gif) repeat-x bottom;
    	    border-top: 1px solid #083772;
    	    padding:2px 4px;
    	    color:white;
    	    font:normal 8pt arial,helvetica;
        }
    	#nav {
    	}
    	#nav, #inner1, #inner2 {
    	    padding:10px;
    	}
    	#content p {
    	    margin:5px;
    	}
    	#nav li {
    	    padding:2px;
    	    padding-left:10px;
    	    background-image:url(images/bullet.gif);
    	    background-position: -3px 6px;
    	    background-repeat: no-repeat;
    	    font-size:8pt;
    	    display: block;
        }
        .ylayout-panel-north, .ylayout-panel-south, #content .ylayout-panel-center{
            border:0px none;
        }
        #content .ylayout-panel-south{
            border-top:1px solid #aca899;
        }
        #content .ylayout-panel-center{
            border-bottom:1px solid #aca899;
        }
        </style>
    	<script type="text/javascript">
    	Example = function(){
    	        return {
    	            init : function(){
    	               var layout = new YAHOO.ext.BorderLayout(document.body, {
    	                    north: {
    		                    split:false,
    		                    initialSize: 25,
    		                    titlebar: false
    		                },
    	                    west: {
    	                        split:true,
    	                        initialSize: 150,
    	                        titlebar: true,
    	                        collapsible: true,
    	                        minSize: 100,
    	                        maxSize: 200,
    	                        //collapsed: true,
    	                    },
    	                    south: {
    		                    split:false,
    		                    initialSize: 25,
    		                    titlebar: false
    		                },
    	                    center: {
    	                        autoScroll: false
    	                    }
    	                });
    	                layout.beginUpdate();
    
    	                layout.add('north', new YAHOO.ext.ContentPanel('header'));
    	                layout.add('west', new YAHOO.ext.ContentPanel('menu', {title: 'Menu', fitToFrame:true, closable:false}));
    	                var innerLayout = new YAHOO.ext.BorderLayout('content', {
    	                    south: {
    	                        split:true,
    	                        initialSize: 200,
    	                        minSize: 100,
    	                        maxSize: 300,
    	                        autoScroll:true,
    	                        collapsible:true,
    	                        titlebar: true,
    	                        useShim:true,
                    	        collapsed: true
    	                    },
    	                    center: {
    	                        autoScroll:true
    	                    }
    	                });
    	                innerLayout.add('south', new YAHOO.ext.ContentPanel('inner1', "Detalle"));
    	                innerLayout.add('center', new YAHOO.ext.ContentPanel('inner2', {fitToFrame:true, autoCreate: {tag: 'iframe', src: 'http://www.google.com.ar', id: 'cpMain', name: 'cpMain', frameborder: 'no'}})); 
    	                layout.add('center', new YAHOO.ext.NestedLayoutPanel(innerLayout));
    	                layout.add('south', new YAHOO.ext.ContentPanel('footer'));
    	                layout.endUpdate();
    	           }
    	     }
    
    	}();
    	YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
    	</script>
    </head>
    <body class="ytheme-gray">
    <div id ="container">
      <div id="header" class="ylayout-inactive-content">InstantSite</div>
      <div id="menu" class="ylayout-inactive-content">
          <ul>[*]
    			<a href="http://www.ole.com.ar" target="cpMain">
    			[img][/img]Link 1</a>
    		
    	[*]
    			<a href="nested.html" target="cpMain">
    			[img][/img]Link 2</a>
    		[/list]  </div>
      <div id="content" class="ylayout-inactive-content"></div>
      <div id="inner1" class="ylayout-inactive-content">
            
    
    DETAIL</p>
      </div>
      <div id="footer" class="ylayout-inactive-content">Copyright 2007 - GPL</div>
    </div>
     </body>
    </html>

    Despite is working, i don´t use findPanel or setURL because i don´t find them in the documentation, Where are them ? Is the way i set the links bad ?

  9. #9

Similar Threads

  1. no submit for load Page Iframe
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 6 Mar 2007, 7:13 PM
  2. Bug Load Page "setUrl" in IE6
    By webersouza in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 25 Feb 2007, 6:51 PM
  3. PagedGridView extended (check after load missing page)
    By Sasha in forum Community Discussion
    Replies: 0
    Last Post: 29 Jan 2007, 4:01 AM
  4. Load HTML page into tab
    By JamieG in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 12 Dec 2006, 12:26 AM
  5. About BorderLayout and Load page Via ajax?
    By franklt69 in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 11 Dec 2006, 12:53 PM

Thread Participants: 2