Results 1 to 10 of 25

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

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3

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

    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!

  2. #2
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130
    Answers
    4

    Default

    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

  3. #3

    Exclamation unable to implement

    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

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Location
    Sallanches, France
    Posts
    371
    Answers
    16

    Default

    i use external html page in my application with TPL.
    i have my Panel
    Code:
    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:
    Code:
    <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
    Code:
    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
    HTML Code:
    <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:
    Code:
    items: [{
    		xtype: 'list',
    		store: WPApp.stores.DirectoryCategoryListStore,
    		itemTpl: loadURL('http://localhost:8888/WPApp/app/views/ModuleDirectory/templates/DirectoryCategoryListPanel.html'),
    	}]
    And the TPL:
    Code:
    <div id="CategoryList">
    	{NAME}
    </div>
    And display me all the name of my Store.

    Hope it help you

  5. #5

    Arrow Need Help

    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

  6. #6
    Sencha User
    Join Date
    Sep 2011
    Location
    Sallanches, France
    Posts
    371
    Answers
    16

    Default

    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.

  7. #7
    Sencha User
    Join Date
    Nov 2011
    Location
    Bengaluru
    Posts
    12

    Default Hi

    Quote Originally Posted by rkstar View Post
    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

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    51
    Answers
    7

    Default

    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?

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    22

    Default

    rkstar

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

  10. #10
    Sencha User
    Join Date
    Jul 2013
    Posts
    4

    Default

    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);
    }
    });
    },

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •