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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi