1

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

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

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

4

2 回答 2

2

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

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

Ext.getCmp('console').add([myPanel]);
于 2013-02-25T13:10:51.340 回答
1

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

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();
于 2013-02-25T21:05:44.443 回答