Append HTML to a Sencha Touch Container/Panel

Question

I would like to create sort of an in-app console, so that our app can have a separate tab where we can output (and easily read) debugging information while we test it.

I'm new to Sencha Touch, but in jQuery it would be trivial to do something like:

window.log = function(msg) {
    $("#Console").append('<div>' + msg + '</div>');
}

My Main.js view includes the following:

{
    title: 'Console',
    iconCls: 'info',
    scrollable: true,

    items: [
        {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Console'
        },
        {
            xtype: 'container',
            id: 'console'
        }
    ]
}

This is the best I can come up with, but since it is getting the entire HTML of a container and then resetting it, this seems very wasteful and just all around bad:

    Ext.log = function (msg) {
        var console = Ext.get('console');
        var html = console.getHtml();
        console.setHtml(html + '<div>' + msg + '</div>');
    };

There has to be a better way...right?

Answer 1

You can create a panel each time and can add it in you container..

var myPanel = Ext.create('Ext.Panel', {
    html: 'This will be added to a Container'
});

Ext.getCmp('console').add([myPanel]);