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

您将Ext元素与HTML DOM元素混淆。 Ext Element是由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）

object使用Ext.DomHelper.insertHtml在浏览器中显示对象

1 个答案: