CODEWITHSUNDEEP
javascriptextjs
David
David

Reputation: 4271

How to apply plain javascript to the ext window

My javascript code is somewhat like this

  var myDiv = "<div style="color:#0000FF">
              <h3>This is a heading in a div element</h3>
              <p>This is some text in a div element.</p>
            </div>";

I wanted to apply myDiv on the Ext WIndow.

Somewhat I am trying like this

Ext.create('Ext.window.Window', {
    title: 'MyWin',
    id:'MyWin',
    height: 600,
    width: 1000,
    layout: 'fit',
    render : function(a,b){
        debugger;
        myDiv
    }

}).show();


I don't want to put into item. Is there anyway I can achive this.

Upvotes: 0

Views: 144

Answers (2)

Amita Suri
Amita Suri

Reputation: 319

There are three configs available to add content to a component:

  1. html - to add static content (sets the element's inner HTML.)

  2. tpl - to add dynamic content where the tokens are replaced with content dynamically.

  3. contentEl- to specify an existing element as content of a component

According to your question, it seems you want to show this content inside a window. For this, use the html property as shown in the inline code: 

 var myDiv = [
        "<div style='color:#0000FF'>",
        "<h3>This is a heading in a div element</h3>",
        "<p>This is some text in a div element.</p>",
        "</div>"
    ];

    Ext.create('Ext.window.Window', {
        title: 'MyWin',
        id: 'MyWin',
        height: 200,
        width: 300,
        html: myDiv,
    }).show();

Find the fiddle here.

And if you want to show an existing element inside this window, then you can use the contentEl property as shown below:

var myDiv = [
                "<div id='mydiv' style='color:#0000FF'>",
                "<h3>This is a heading in a div element</h3>",
                "<p>This is some text in a div element.</p>",
                "</div>"
            ];

            var pnl = Ext.create('Ext.panel.Panel', {
                height: 300,
                width: 200,
                html: myDiv,
                renderTo: Ext.getBody()
            });

            Ext.create('Ext.window.Window', {
                title: 'MyWin',
                id: 'MyWin',
                height: 200,
                width: 300,
                layout: 'fit',
                contentEl: pnl.getId(),
            }).show();
        }
    });

Here's the working fiddle.

Hope this is helpful.

Upvotes: 2

Alexander
Alexander

Reputation: 20224

The window has an html config.

You can either set the config before instantiation:

Ext.create('Ext.window.Window', {
    html: myDiv

or update it at runtime throught the setter:

Ext.create('Ext.window.Window', {
    listeners:{
        afterrender : function(win){
            win.setHtml(myDiv);
        }
    }

Upvotes: 3

Related Questions