如何普通的JavaScript應用到EXT窗口

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窗口申請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 

或在運行時更新throught二傳手：

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

Answer 2

有三種CONFIGS將內容添加到一個組件：

1. html - 添加靜態內容（設置元素的內部HTML）。

2. tpl - 添加動態內容，其中動態替換內容。

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

希望這是有幫助的。