Showing Pre-Loaded Html Pages in a Panel or TabPanel

[mvbaffa]

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.

[plalx]

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.

 
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);
     }
    }
   ]
  });
 });

[mvbaffa]

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.

[plalx]

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

[mvbaffa]

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

I will try this soluction.

Thank you very much

[plalx]

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

E.g.

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

[mvbaffa]

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

E.g.

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

Ok Thanks