PDA

View Full Version : Loading External Html Files



darthwes
26 Mar 2010, 10:42 AM
Hi all. What I have is a link on my page and I want to click it and have a pop up appear with another page from the site rendered inside of it.

Basically, I have a window and inside the window I want to show another html page. The page I want to show is a local page in the same path as the page I'm building. Right now it's a simple table with 4 rows, two of those rows have unordered lists in them with li's, etc. There's nothing else in page2.html, it's very simple. Just a few rows with some bullets (visually).

So why does this fail?



new Ext.Window({
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Test',
items: [{
id: 'test-x',
listeners: {
afterrender: function() {
Ext.get('test-x').load({
url: './page2.html',
scripts: false,
callback: function(elX, success, response, opts) {
var html = response.responseText;
var el = Ext.getCmp('test-x').getUpdater().getEl();
el.dom.innerHTML = '<div></div>';
el.insertHtml('afterbegin', html);
}
});
}
}]
}).show();
OK, that almost worked. Except I seem to have lost all my bullets from my unordered lists. I'll bet I'm losing more than just my nice bullets, but that is what stands out to me.

Does anyone know what is going on or if there is a simpler way to load up an external html file?

ishobr
27 Mar 2010, 7:28 PM
You can use the simpler config options:



new Ext.Window({
xtype: 'tabpanel',
activeTab: 0,
items: [{
title: 'Test',
autoLoad: 'page2.html'
}]
}).show();


extjs reset all ul/ol to {margin: 0; padding:0; list-style: none}. Just override this style on your own css.

Ihsan