object Object displaying in browser with Ext.DomHelper.insertHtml

Question

I appreciate the patience in advance, as I am new to ExtJS. I am trying to add an html element when loading my store. Currently, it is appending the object [object Object] to the page, but I need to display the div itself. The tileDiv in the DomHelper line is my issue. My code is as follows:

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

You are confusing Ext elements with HTML DOM elements. An Ext Element is an object created by ExtJS that wraps a DOM element.

Look at the doc:

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

It expects the last statement to be an HTML fragment. You are passing an Ext.Element.

What you are probably trying to do is something like this:

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/

Please note that your event handler onKeyUp will only work on focusable elements. (see http://www.quirksmode.org/dom/events/keys.html)