ExtJs 3.4 Button.show()가 잘못된 위치에 나타납니다

Question

저는 시작 버튼과 저장 버튼이라는 2 개의 항목이있는 패널이 있습니다. 시작 버튼이 왼쪽 하단에 있습니다 저장 버튼이 오른쪽 하단에 있습니다

저장 버튼이 숨겨져 있습니다. show()를 사용하여 표시하면 저장 버튼이 시작 버튼 상단에 나타납니다. 이러한 모든 숨기기 및 표시 호출이 제거되면 버튼이 올바른 위치에 렌더링됩니다.

누구나 알고 있을까요? (당신은 아마는 ExtJS의 레이아웃 관리에 대한 혼란스러워 .. 난 정말이 하나의 프레임 워크를 싫어

Answer 1

[startbutton, 스페이서, savebutton]

오 신 :

그것은 항목과 똑바로 패널입니다 당신이 어떻게 그것이 일하는지에 관해 이해하면 그것은 실제로 아주 멋지다). 또한 요소의 가시성을 토글 한 후에 모든 항목이 올바르게 배치되도록하려면 doLayout을 수행해야합니다. 이 jsfiddle에서

봐 : http://jsfiddle.net/LVKyM/

Ext.onReady(function(){ 

    var pnl = new Ext.Panel({ 
     renderTo: 'ctn-panel', 
     width: 300, 
     cls: 'my-pnl', 
     bodyBorder: false, 
     border: false, 
     layout: 'hbox', 
     layoutConfig: { 
      padding: 5 
     }, 
     items: [ 
      startBtn = new Ext.Button({ 
       text: 'start', 
       width: 100, 
       hidden: true 
      }), { 
       xtype: 'spacer', 
       flex: 1, 
      }, { 
       xtype: 'button', 
       text: 'save', 
       width: 100 
      } 
     ] 
    }); 

    new Ext.Button({ 
     renderTo: 'button-container', 
     text: 'Show/hide', 
     handler: function(){ 
      startBtn.show(); 
      pnl.doLayout(); 
     } 
    }); 
});