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

**soubhagya ranjan** · 18 Nov 2011, 2:35 AM

Originally Posted by 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:

Code:

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:

Code:

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:

Code:

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 Code:

<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 Code:

<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 :

Code:

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:

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:

Code:

    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 :

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 :

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'
                    }


                ]
            },
            {
               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.

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

Thread Tools

Search Thread

Display

Hi

Using the HTMLPanel in a item

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News