CODEWITHSUNDEEP
extjs
Vrushank
Vrushank

Reputation: 131

How to load external html file in panel or container sencha touch 2.3

I'm trying to develop an app for iOS and android using Sencha touch and I want to create a panel or container that loads an external HTML placed in same folder.

as we are using webview in phonegap application in android or UIWebView in iOS.

Upvotes: 0

Views: 7054

Answers (2)

Sumit Chauhan
Sumit Chauhan

Reputation: 101

//Created this Panel Extender, that suited me better:

Ext.define('Pricing.controller.HtmlPanelExtender', {
    extend: 'Ext.Panel',
    alias: 'widget.htmlPanelExtender',
    autoScroll: true,
    constructor: function (config) {
        this.superclass.constructor.apply(this, arguments);
        this.loaded = false;
        this.load = function () {
            if (!this.loaded && this.url && (this.url.length > 0)) {
                Ext.Ajax.request({
                    disableCaching: false,
                    url: this.url,
                    method: "GET",
                    panel: this,
                    success: function (response, request) {
                        request.panel.update(response.responseText);
                        request.panel.loaded = true;
                    }
                });
            }
        };
        this.on('show', this.load);
        if (this.autoLoad) {
            this.load();
        }
    },
    url: null
});



// use it like this

items: [{
    id: 'abc',
    xtype: 'htmlPanelExtender',
    scroll: 'vertical',
    border: 0,
    autoLoad: true,
    url: 'templates/adminhome.html'
}]

Upvotes: 0

Vrushank
Vrushank

Reputation: 131

Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.Panel',
config: {
    id: 'MyPanel',
    itemId: 'MyPanel',
    scrollable: true,
    listeners: [
        {
            fn: 'onMyPanelActivate',
            event: 'activate'
        }
    ]
},    onMyPanelActivate: function(newActiveItem, container, oldActiveItem, eOpts) {
    Ext.Ajax.request({
        //local path of your html file
        url: 'html/index.html',
        success : function(response) {
           Ext.getCmp('MyPanel').setHtml(response.responseText);
        },
        failure : function(response) {  
            var text = response.responseText;
            Ext.Msg.alert('Error', text, Ext.emptyFn);            }
    });
}});

Upvotes: 4

Related Questions