将 HTML 附加到 Sencha Touch 容器/面板答案

【问题标题】：Append HTML to a Sencha Touch Container/Panel将 HTML 附加到 Sencha Touch 容器/面板
【发布时间】：2013-02-22 19:41:02
【问题描述】：

我想创建一种应用内控制台，以便我们的应用可以有一个单独的选项卡，我们可以在测试时输出（并轻松读取）调试信息。

我是 Sencha Touch 的新手，但在 jQuery 中执行以下操作很简单：

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

我的 Main.js 视图包括以下内容：

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

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

这是我能想到的最好的方法，但由于它是获取容器的整个 HTML 然后重置它，这似乎非常浪费而且很糟糕：

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

一定有更好的方法……对吧？

【问题讨论】：

尝试在没有 id 的情况下工作。而是使用 itemId

标签： extjs sencha-touch sencha-touch-2

【解决方案1】：

您可以每次创建一个面板并将其添加到您的容器中..

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

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

【讨论】：

测试这似乎可行，但对于其他用途，请确保您可以稍后销毁该项目。
用日志消息销毁面板？还是销毁对控制台的引用？那么使用 Ext.fly('console') 会更好吗？
请不要在不必要的时候使用面板。使用最轻量级的组件。在这种情况下：Ext.Component

【解决方案2】：

如果你只需要短时间的消息，你可以添加：

var actionSheet = Ext.create('Ext.ActionSheet', {
    items: [
        {
            xtype: 'container',
            html  : 'My Message',
            style: 'color: white;'
        }
    ],
    itemId: 'debugMessage',
    listeners: {
        show: function () {
            Ext.defer(function(){
                Ext.Viewport.down('.container[itemId=debugMessage]').hide();
                Ext.defer(function(){
                    Ext.Viewport.down('.container[itemId=debugMessage]').destroy();
                },250);
            },1400);
        }
    }
});
Ext.Viewport.add(actionSheet);
actionSheet.show();

【讨论】：