PDA

View Full Version : Load Ext.Panel content from external HTML file [answer]



rkstar
23 Aug 2011, 7:54 PM
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
24 Aug 2011, 5:02 AM
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
4 Oct 2011, 3:59 AM
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
4 Oct 2011, 4:14 AM
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 =P~

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
5 Oct 2011, 12:23 AM
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
5 Oct 2011, 12:27 AM
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
5 Oct 2011, 12:34 AM
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
5 Oct 2011, 12:36 AM
yep good luck, see with PhoneGap, i don't know if it's the same code than sencha touch

anikralhan
5 Oct 2011, 4:51 AM
Thanks :)

whiplash
7 Oct 2011, 1:48 AM
html: "<iframe src='testPage.php' width='100%' height='100%'><p>Your browser does not support iframes.</p> </iframe>"

this worked for me

soubhagya ranjan
18 Nov 2011, 2:35 AM
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!





Its working fine when i m loading a html file with simple content with no java script tag, e.g code given below




<html> <head> Hello </head> </html>



But it is not working for html which contents java script tag, e.g i m trying to load a pie chart through this html as follows.

bars.html



<html><head><title>canvas-line</title><script type="text/javascript">
window.onload = function(){ var x=20; var y=0; var w=10; var h=190; var mh=190; var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.rect(0,0,600,200); context.fillText("0",3,199); context.moveTo(10,0); context.lineTo(10, 200); context.stroke(); context.beginPath(); context.moveTo(0,190); context.lineTo(600, 190); context.stroke(); for(var i=1;i<6;i++) {context.fillStyle="black";context.fillText(i,x,199);
context.rect(x,y,w,h); var grd = context.createLinearGradient(230, 0, 370, 200); grd.addColorStop(0, "#8ED6FF"); // light blue grd.addColorStop(1, "#004CB3"); // dark blue context.fillStyle = grd; context.fill(); x=x+w+10; y=y+10; h=mh-y;}};
</script ></head><body><canvas id="myCanvas" width="600" height="200"></body></html>

please help me to get this.
Thanks in advance

noromamai
2 Feb 2012, 7:01 AM
the loadUrl method seems to sometimes cache the html file it fetches (in Android), deleting the app cache/data will get it to update. but it doesn't behave this way all the time.
can caching be disabled?

Sasha172
2 Feb 2012, 7:31 AM
iFrame always works for me :



html : '<iframe src="http://your-url-here.html" width="100%" height=\"100%\">Your device does not support iframes.</iframe>'

noromamai
2 Feb 2012, 7:34 AM
i had the same problem with the iframe method, maybe it's because i am running the app from within phonegap. i found some info on cache-manifest and am using that now with "NETWORK: *" so it doesn't cache anything. So far it seems to be ok, but hard to test since it doesn't happen all the time.

igama
20 Mar 2012, 2:31 AM
How would one use the HTMLPanel solution in a Item?

For examples, the following code:


Ext.define('Sencha.view.Search', { extend: 'Ext.Panel',
xtype: 'searchcard',


config: {
iconCls: 'search',
title: 'Search',
styleHtmlContent: true,
scrollable: 'vertical',
layout: {
type: 'vbox'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Search'
},
{
xtype: 'fieldset',
width: "100%",
style: {float:'left'},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Search for'
},{
xtype: 'button',
text: 'Search',
ui: 'confirm'
},{ width: '60px' }
]},
{
> INSERT IT HERE <
}
]
}
});




I tried adding the following code where its marked, but didn't work:



extend: 'HTMLPanel', config: {
styleHtmlContent: true,
scrollable: 'vertical',
url: 'page.html',
}


any ideias? i'm still a bit new on Sencha :\

Sasha172
20 Mar 2012, 2:33 AM
Your panel code :



var myPan = new Ext.Panel({

html : '<iframe src="http://your-url-here.html" width="100%" height=\"100%\">Your device does not support iframes.</iframe>'
});

igama
20 Mar 2012, 3:06 AM
I also tried that code, but I can't scroll the page content :/

Sasha172
20 Mar 2012, 3:11 AM
try adding scroll : 'vertical' or scrollable : true

igama
20 Mar 2012, 3:41 AM
I have :

{
scrollable: 'vertical',
html: '<iframe src=\"/search-results.html\" width=\"100%\" height=\"100%\">Your device does not support iframes.</iframe>'
}

With the scrollable, the content will not show :\

this is the full code of the file.js :


Ext.define('Sencha.view.Search', {
extend: 'Ext.Panel',
xtype: 'searchcard',


config: {
iconCls: 'search',
title: 'Search',
styleHtmlContent: true,
scrollable: 'vertical',
layout: {
type: 'vbox'
},
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Search'
},
{
xtype: 'fieldset',
width: "100%",
style: {float:'left'},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Search for'
},{
xtype: 'button',
text: 'Search',
ui: 'confirm'
},{
width: '60px'
}


]
},
{
scrollable: 'vertical',
html: '<iframe src=\"/search-results.html\" width=\"100%\" height=\"100%\">Your device does not support iframes.</iframe>'
}


]
}
});

Sasha172
20 Mar 2012, 3:43 AM
please read my reply :

add -->
scroll:'vertical'

see if it works before you post again.

Sasha172
20 Mar 2012, 3:45 AM
The addition should be either
scroll : 'vertical'
OR
scrollable : true

NOT
scrollable : 'vertical'

Consult the API documentation pls !!!


please read my reply :

add -->
scroll:'vertical'

see if it works before you post again.

igama
20 Mar 2012, 4:07 AM
You right, sorry for the mistake.

But i'm going to use myput solution (http://www.sencha.com/forum/showthread.php?144847-Load-Ext.Panel-content-from-external-HTML-file-answer&p=656018&viewfull=1#post656018) for now.

Thanks ;)

korzinka
18 Apr 2012, 6:07 AM
rkstar (http://www.sencha.com/forum/member.php?308308-rkstar)

I'm trying it (using Safari), but Ajax.request is always 'failure' . Why can it be? I have never worked with Ajax before((

DragonSL
6 Dec 2013, 5:54 AM
config {
refs :
{
MyPanel : 'component[itemId=MyPanel]',
},

control : {
'MyPanel' : {
initialize: 'onFormInit',
}
}
},
onFormInit: function () {
var scr = this.getMyPanel();
if (Ext.isEmpty(scr)) return;
Ext.Ajax.request({
method : "GET",
url: 'mypage.html',
success: function(response){
var text = response.responseText;
scr.setHtml(text);
}
});
},

njoshsn
27 Jan 2015, 5:23 AM
Thanks @whiplash The best ans here