Results 1 to 7 of 7

Thread: How to add Add HTML string in Extjs Window

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    16

    Default How to add Add HTML string in Extjs Window

    I have requirement to render HTML string in a extjs window.I tried to add displayfield into the window and set HTML string as value for the field but it was not rendered as how it is rendered when opened normally through Internet explorer.

    I though of using Iframes but since it supports only file path and not the HTML string as innerHTML.I was unable to do it.So please let me know if anyone has a solution for this.

  2. #2
    Sencha User
    Join Date
    Oct 2009
    Location
    Cambridge, UK
    Posts
    164

    Default Ermmm

    Check the documentation for Ext.Window, it has a config option html.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    16

    Default

    I tried using html configuration since the stylesheet of ExtJS is conflicting with HTML Stylesheet so it is not dispalying properly.

    I read in some blog that iframes will help in this scenario but any idea how I can render HTML content inside iframe?

  4. #4
    Sencha User
    Join Date
    Oct 2009
    Location
    Cambridge, UK
    Posts
    164

    Default

    Yes, an <iframe> can help here as it wll be a fresh html document, free from the CSS of Ext and your main app. You can set the html of the iframe's document with something like:

    Make your iframe like this:
    Code:
    new Ext.Panel({
        items: [{
            autoEl: {
                id: 'content_iframe',
                tag: 'iframe'
            },
            xtype: 'box'
        }]
    });
    And then set the html with:
    Code:
    Ext.get('content_iframe').dom.contentWindow.document.body.innerHTML = 'Hello <b>world!</b>';

  5. #5
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Code:
    var win = new Ext.Window({
      title: 'My Window',
      width: 640,
      height: 400,
      preventBodyReset: true,
      html: '<h1>This should be the way you expect it!</h1>'
    });
    win.show();

  6. #6

    Default using <img ..> in exts

    Ext.require('Ext.panel.Panel');
    Ext.onReady(function() {
    new Ext.Panel({
    renderTo:'lay-out',
    title: 'hinh anh',
    items: [{
    html: "<img src='2.ipg' with='200px' height='200px'/>",
    xtype: "panel"},

    ]
    });
    });
    no show image??
    why???????
    thanks you

  7. #7

    Default

    this worked !!
    Quote Originally Posted by Uberdude View Post
    Yes, an <iframe> can help here as it wll be a fresh html document, free from the CSS of Ext and your main app. You can set the html of the iframe's document with something like:

    Make your iframe like this:
    Code:
    new Ext.Panel({
        items: [{
            autoEl: {
                id: 'content_iframe',
                tag: 'iframe'
            },
            xtype: 'box'
        }]
    });
    And then set the html with:
    Code:
    Ext.get('content_iframe').dom.contentWindow.document.body.innerHTML = 'Hello <b>world!</b>';

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •