Sencha Touch 컨테이너/패널에 HTML 추가

Question

인앱 콘솔을 만들고 싶습니다. 테스트 할 때 디버깅 정보를 출력 할 수있는 별도의 탭을 가질 수 있습니다.

나는 센차 터치에 새로운 해요,하지만 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>'); 
    }; 

더 좋은 방법이 있어야합니다 ... 맞습니까?

그냥 짧은 기간 동안 메시지를해야 할 경우 당신은 패널 각 시간을 만들 수 있으며, 컨테이너에 추가 할 수 있습니다

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