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

我想創建一種應用內控制檯，以便我們的應用可以有一個單獨的選項卡，我們可以在測試時輸出（並輕鬆讀取）調試信息。將HTML附加到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>'); 
    };

必須有更好的方法......對吧？

來源

2013-02-22 David Boike

嘗試工作沒有身份證「。相反，使用itemId – Dinkheller 2013-02-25 20:53:39

您可以創建一個面板中的每個時間，可以在你容器中加入吧..

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

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

來源

2013-02-25 13:10:51 1Mayur

進行測試似乎可行，但對於其他用法，請確保您可以稍後銷燬該項目。 – Dinkheller 2013-02-25 20:54:43

用日誌消息銷燬面板？或者銷燬對控制檯的引用？那麼使用Ext.fly（'console'）會更好嗎？ – 2013-02-25 21:09:47

當你不必使用時請不要使用面板。使用最輕量級的可能組件。在這種情況下：Ext.Component – Christoph 2013-03-11 22:31:11

如果你只需要在短期內的消息，您可以添加：

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-25 21:05:44 Dinkheller

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

回答

相關問題