Question

我的javascript代码有点像这样

  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 WIndow上应用myDiv。

我正在尝试这样的

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.

Answer 1

该窗口有html个配置。

您可以在实例化之前设置配置：

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

或在运行时通过setter更新它：

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

Answer 2

有三种配置可用于向组件添加内容：

html - 添加静态内容（设置元素的内部HTML。）
tpl - 添加动态内容，动态地将内容替换为内容。
contentEl - 将现有元素指定为组件的内容

根据您的问题，您似乎想在窗口中显示此内容。为此，请使用内联代码中显示的html属性：

 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();

找到小提琴here。

如果您想在此窗口中显示现有元素，则可以使用contentEl属性，如下所示：

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工作小提琴。

希望这有用。

如何将普通的javascript应用于ext窗口

2 个答案: