PDA

View Full Version : Showing Pre-Loaded Html Pages in a Panel or TabPanel



mvbaffa
29 Sep 2010, 4:05 AM
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
29 Sep 2010, 11:45 AM
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
29 Sep 2010, 11:53 AM
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
29 Sep 2010, 5:41 PM
I am pretty sure it will work, but you can just try it and see...

mvbaffa
30 Sep 2010, 4:46 AM
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
30 Sep 2010, 5:13 AM
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
30 Sep 2010, 10:13 AM
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