1. #11
    Sencha User
    Join Date
    Nov 2011
    Location
    Bengaluru
    Posts
    12
    Vote Rating
    0
    soubhagya ranjan is on a distinguished road

      0  

    Default Hi

    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

  2. #12
    Sencha User
    Join Date
    Nov 2011
    Posts
    51
    Answers
    7
    Vote Rating
    0
    noromamai is on a distinguished road

      0  

    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?

  3. #13
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


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

  4. #14
    Sencha User
    Join Date
    Nov 2011
    Posts
    51
    Answers
    7
    Vote Rating
    0
    noromamai is on a distinguished road

      0  

    Default


    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.

  5. #15
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    igama is on a distinguished road

      0  

    Question Using the HTMLPanel in a item

    Using the HTMLPanel in a item


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

  6. #16
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


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

  7. #17
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    igama is on a distinguished road

      0  

    Default


    I also tried that code, but I can't scroll the page content :/

  8. #18
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    try adding scroll : 'vertical' or scrollable : true

  9. #19
    Sencha User
    Join Date
    Mar 2012
    Posts
    8
    Vote Rating
    0
    igama is on a distinguished road

      0  

    Default


    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>'
                }
    
    
            ]
        }
    });

  10. #20
    Sencha User
    Join Date
    Aug 2011
    Location
    Mumbai, India
    Posts
    118
    Answers
    11
    Vote Rating
    4
    Sasha172 is on a distinguished road

      0  

    Default


    please read my reply :

    add -->
    scroll:'vertical'

    see if it works before you post again.