1. #1
    Sencha User
    Join Date
    Oct 2009
    Posts
    39
    Vote Rating
    0
    mvbaffa is on a distinguished road

      0  

    Question Showing Pre-Loaded Html Pages in a Panel or TabPanel

    Showing Pre-Loaded Html Pages in a Panel or TabPanel


    Hi,

    I have just downloaded EXT JS and I would like to pre-load some HTML pages that contains javascript using AJAX.
    These pages would be used in a panel alternativelly, and I would like to switch the pages displayed in the panel using a button.

    I do not want to use card layouts. I just want to switch and show a page as asked by the user.

    I have a class, using jQuery that already load the pages and store their content in an array. So I have an array that stores the content of the pages. I just want to switch the content of a panel using the pages stored in this array.

    I could not find an example similar

    Can you help and show the better directions.

  2. #2
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    You can use the update() method of the panel's body (which is an Ext.Element) to load HTML dynamically and run scripts that are found in the HTML blob. You also should consider setting the preventBodyReset config option of the panel to true to prevent Ext's CSS to mess up your display.

    E.g.

    Code:
     
    Ext.onReady(function() {
     
      var htmlBlob = "<p id='text-ct'></p><script>Ext.get('text-ct').update('Loaded from dynamically loaded script');<\/script>";
     
      var panel = new Ext.Panel({
       title: 'Loading HTML dynamically into a panel\'s body',
       renderTo: document.body,
       width: 500,
       height: 100,
       buttons: [
        { 
         text: 'Load HTML and scripts',
         handler: function() {
          //Update panel body (which is an Ext.Element) using the update() method.
          //The second argument specify to parse html blob and run code in script tags.
          panel.body.update(htmlBlob, true);
         }
        }
       ]
      });
     });

  3. #3
    Sencha User
    Join Date
    Oct 2009
    Posts
    39
    Vote Rating
    0
    mvbaffa is on a distinguished road

      0  

    Default


    htmlBlob in my case is an array of markup with javascript included of the pages loaded with jQuery.

    If I update my Panel and/or Insert in my container one of the elements of my array will the Javascript work ok ???
    That is will the ($document).ready of jQuery of Ext.onReady of ExtJS work correctly ???

    Thanks for your answer.

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    I am pretty sure it will work, but you can just try it and see...

  5. #5
    Sencha User
    Join Date
    Oct 2009
    Posts
    39
    Vote Rating
    0
    mvbaffa is on a distinguished road

      0  

    Default


    Quote Originally Posted by scarsick View Post
    I am pretty sure it will work, but you can just try it and see...
    I will try this soluction.

    Thank you very much

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Posts
    480
    Vote Rating
    1
    plalx has a spectacular aura about plalx has a spectacular aura about

      0  

    Default


    Btw, make you that you escapes the closing script tags in your html markup contained in arrays.
    It might now work otherwise.

    E.g.

    Code:
     
    var scriptTag = "<script>console.log('run');<\/script>";

  7. #7
    Sencha User
    Join Date
    Oct 2009
    Posts
    39
    Vote Rating
    0
    mvbaffa is on a distinguished road

      0  

    Default


    Quote Originally Posted by scarsick View Post
    Btw, make you that you escapes the closing script tags in your html markup contained in arrays.
    It might now work otherwise.

    E.g.

    Code:
     
    var scriptTag = "<script>console.log('run');<\/script>";
    Ok Thanks

Similar Threads

  1. not showing the html page in tab panel
    By anoop abbot in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 6 May 2009, 2:01 AM
  2. showing the html page in a tabpanel
    By anoop abbot in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Apr 2009, 1:20 AM
  3. Scripts in HTML loaded in a Panel
    By jorseijo in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 25 Aug 2008, 8:07 AM
  4. Access an html element that has been loaded to panel
    By captainsina in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 24 Apr 2008, 4:55 AM
  5. html loaded into tab or panel - has line at bottom?
    By chitownd in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 19 Oct 2007, 7:50 AM

Thread Participants: 1

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..."