Display external page inside panel

  1. anikralhan
    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 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 inside that panel.
    I'm newbie to sencha touch, kindly help me out.

  2. Abhishek Srivastava
    Abhishek Srivastava
    Hi Anikralhan,

    You can do this using the concept of Xtemplate
    just put your html content inside Xtemplate .
  3. santuy2k
    Ext.onReady(function () {
    var configs = [{
    title: 'Basic Panel',
    collapsible: true,
    width: 400,
    items: [
    xtype: 'panel',
    html: '<iframe id="container" src="give u r page" style="width:100%;height:100%;border:none"></iframe>',
    border: true,
    layout: {
    type: 'vbox',
    pack: 'center'
    //align: 'stretch'
    renderTo: 'DivContent',
    Ext.each(configs, function (config) {
    var element = Ext.getBody().createChild({ cls: 'panel-container' });
    Ext.createWidget('panel', Ext.applyIf(config, {
    renderTo: element,
    bodyPadding: 7

    otherwise refer this example:--extjs4.1/docs/index.html#!/example/panel/panel.html

    i think it will be useful a little bit ,i am using this extjs in dotnet visualstudio 2010 not java
Results 1 to 3 of 3