Question

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

我是Sencha Touch的新手，但是在jQuery中，做一些像这样的事情是微不足道的：

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

My 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>');
    };

必须有更好的方法......对吧？

Answer 1

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

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

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

Answer 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();

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

2 个答案: