對象對象在Ext.DomHelper.insertHtml瀏覽器中顯示

Question

我很欣賞耐心，因爲我是ExtJS的新手。我正在加載我的商店時試圖添加一個html元素。目前，它將對象[object Object]附加到頁面上，但我需要顯示div本身。 DomHelper行中的tileDiv是我的問題。我的代碼如下：

function handleKeyUp(e) { 
    var code = e.keyCode ? e.keyCode : e.which; 
    if (code === 38) { //up key 
     alert('up'); 
    } else if (code === 40) { //down key 
     alert('down'); 
    } 
} 
var tileDiv = new Ext.Element({ 
    tag: 'div', 
    id: tileId, 
    cls: 'tile', 
    html: html, 
    listeners: { 
     keyup: handleKeyUp, 
     scope: this 
    } 
}); 
Ext.DomHelper.insertHtml('beforeEnd', this.el.dom, tileDiv); 

Answer 1

您在使用HTML DOM元素混淆Ext元素。 Ext元素是由ExtJS創建的一個對象，它包裝了一個DOM元素。

看的文檔：

insertHtml(where, el, html) : HTMLElement 
Inserts an HTML fragment into the DOM. 

，預計最後一條語句是一個HTML片段。你正在傳遞一個Ext.Element。

什麼你可能想要做的是這樣的：

Ext.onReady(function(){ 
    Ext.DomHelper.append(Ext.getBody(), { 
     tag: 'div', 
     id: 'tileId', 
     cls: 'tile', 
     html: '<h1>Hello world</h1>', 
     listeners: { 
      keyup: function handleKeyUp(e) { 
       var code = e.keyCode ? e.keyCode : e.which; 
       if (code === 38) { //up key 
        alert('up'); 
       } else if (code === 40) { //down key 
        alert('down'); 
       } 
      }, 
      scope: this 
     } 
    }); 
}); 

http://jsfiddle.net/RCXdL/

請注意，您的事件處理程序的onkeyup只能在可聚焦元素的工作。 （見http://www.quirksmode.org/dom/events/keys.html）