1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    3
    Vote Rating
    1
    rkstar is on a distinguished road

      1  

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

    Unanswered: 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
    Vote Rating
    0
    jjerome is on a distinguished road

      0  

    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
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    anikralhan is on a distinguished road

      0  

    Exclamation unable to implement

    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
    Vote Rating
    1
    myput is on a distinguished road

      0  

    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
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    anikralhan is on a distinguished road

      0  

    Arrow Need Help

    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
    Vote Rating
    1
    myput is on a distinguished road

      0  

    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
    Sep 2011
    Posts
    6
    Vote Rating
    0
    anikralhan is on a distinguished road

      0  

    Thumbs up


    I have given correct path in index.html .
    I'll google it out and hope I get some way out.
    Thanks for your reply.

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Sallanches, France
    Posts
    371
    Answers
    16
    Vote Rating
    1
    myput is on a distinguished road

      0  

    Default


    yep good luck, see with PhoneGap, i don't know if it's the same code than sencha touch

  9. #9
    Sencha User
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    anikralhan is on a distinguished road

      0  

    Smile


    Thanks

  10. #10
    Sencha User
    Join Date
    Sep 2011
    Posts
    51
    Answers
    2
    Vote Rating
    0
    whiplash is on a distinguished road

      0  

    Default iFrame

    iFrame


    html: "<iframe src='testPage.php' width='100%' height='100%'><p>Your browser does not support iframes.</p> </iframe>"

    this worked for me

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar