Load Ext.Panel content from external HTML file [answer]

[rkstar]

i've been trying to figure out a way to easily load html content from a file instead of by specifying the "html" parameter in the Ext.Panel constructor.

here is how we know:

var panel = new Ext.Panel({
  scroll : "vertical",
  title   : "my panel",
  html   : "<b>MY</b> panel <i>is normal.</i>"
});

by extending the regular ol' Ext.Panel i've added the ability to load in html content from an external file:

var htmlPanel = new HTMLPanel({
  scroll : "vertical",
  title   : "my html panel",
  url     : "/my/html/panel/files/dir/file.html"
});

that's it! it will now load the html content form the file you specify in the "url" parameter in the constructor. cool eh?

here is the extension code. i've put this into a file called HTMLPanel.js that i include after my sencha-touch.js include:

HTMLPanel = Ext.extend(Ext.Panel, {
    constructor : function( config ) {
        HTMLPanel.superclass.constructor.apply(this, arguments);
        
        // load the html file with ajax when the item is
        // added to the parent container
        this.on(
            "added",
            function( panel, container, index ) {
                if( this.url && (this.url.length > 0) )
                {
                    Ext.Ajax.request({
                        url : this.url,
                        method : "GET",
                        success : function( response, request ) {
                            //console.log("success -- response: "+response.responseText);
                            panel.update(response.responseText);
                        },
                        failure : function( response, request ) {
                            //console.log("failed -- response: "+response.responseText);
                        }
                    });
                }
            },
            this
        )
    },
    
    url : null
});

nothing crazy, but really helps my code. hopefully it'll help someone else. please comment on how it can be improved!

[jjerome]

Wow I like this, when I needed to use external html for a panel, this is the way I did it, but I never extended the Ext.Panel and customized it. I'll give this a try in my code

[anikralhan]

Hi Buddy,
I have been googling on this topic since long but couldn't find any way out "how to load an external html page inside a panel".
Actually, I'm working on an app where
->a user clicks on an item in listview.
->Depending on the item selected, It will open the html page(which is in same location) inside the panel.
for example, suppose I have a list having ABC,CDE,XYZ elements and when user clicks on ,say, ABC, a page ABC.html is loaded showing its TITLE(ABC) and a back button(to move back to list page) on toolbar and below(detail panel), its html content as defined in ABC.html . Right now, I'm able to make toolbar but couldn't find any way to load the corresponding html page.
I'm newbie to sencha touch, kindly help me out.
Thanks in Advance
Anik

[myput]

i use external html page in my application with TPL.
i have my Panel

WPApp.views.CreditPanel = Ext.extend(Ext.Panel,{
    fullscreen: true,
items: [
		{
			title: 'Credits',
			html:  loadURL('http://localhost:8888/WPApp/app/views/ModuleCredit/templates/CreditPanel.html'),
		}
	]

After, my TPL, just an html basic page:

<div id="CreditPanel">
	<a href="http://www.cecece.html">Link</a>
	<br/>
    <h1>blabla</h1>
</div>

And at the base of application in /app file; i have a globals.js who contain

function loadURL(url) {
	var oRequest = new XMLHttpRequest();
	oRequest.open('GET', url, false);
	oRequest.setRequestHeader("User-Agent", navigator.userAgent);
	oRequest.send(null)
	
	return oRequest.responseText;
};

Just that. don't forget to add

<script src="app/globals.js" type="text/javascript"></script>

in your index.html

I have now NO Html line in my code. Just use Templates and call the file in my code.
A really big advantage too: you can use variables in your TPL.

for exemple in a list:

items: [{
		xtype: 'list',
		store: WPApp.stores.DirectoryCategoryListStore,
		itemTpl: loadURL('http://localhost:8888/WPApp/app/views/ModuleDirectory/templates/DirectoryCategoryListPanel.html'),
	}]

And the TPL:

<div id="CategoryList">
	{NAME}
</div>

And display me all the name of my Store.

Hope it help you

[anikralhan]

Thanks for your reply.I have implemented as directed by you. But m facing following issues now:
->In emulator, I'm able to open external page no css and javascript is being executed.
->But in iPad nothing is being displayed at all.

Seeing your code it seems that the external page is stored at server and you are fetching data from there.
But I'm making app using phonegap(for iPad). And I want to display html file which in same directory of the javascript file which is creating panel,list etc.

Here is my code snippet of the panel where I want to display my html file:

PictureDictionary.detailPanel = new Ext.Panel({
id: 'detailpanel',

tpl:loadURL('ANATOMY.html'),
});


I have added 'globals.js' also .
Please guide me where I'm wrong.
Thanks in advance

[myput]

Hum i don't use PhoneGap, maybe it's that.
Have you do some research about phonegap + tpl ?
Your code seems good for the moment, make sure about path of your files, in global, in index.html and for the TPL.

[anikralhan]

I have given correct path in index.html .
I'll google it out and hope I get some way out.
Thanks for your reply.

[myput]

yep good luck, see with PhoneGap, i don't know if it's the same code than sencha touch

[anikralhan]

Thanks

[whiplash]

html: "<iframe src='testPage.php' width='100%' height='100%'><p>Your browser does not support iframes.</p> </iframe>"

this worked for me