ExtJS 영구 패널 (autoDestroy 없음)

Question

친애하는 동료 프로그래머 들께!

ExtJS의 영구 패널과 관련하여 질문이 있습니다. 단일 컨테이너 패널 내부에 표시 할 몇 가지 양식 패널이 있습니다. 표시된 양식은 사용자가 편집중인 오브젝트의 유형에 따라 다 (니다. 지금까지 내가 이해, 이것은 다음과 같은 3 문에 의해 달성 될 수있다 :

• 에서 removeAll (사실은)
이 (지속적인 서식 패널)
• 에서 doLayout()는

문제는

추가입니다 이것은 작동하지 않는 것 같습니다. 2 개의 다른 영구 양식 패널을 사용하는 경우, 둘 다 컨테이너 패널에 고정됩니다.

• 에서 removeAll (참)
• 추가 (새로운 형태 : 이상한 점은 내가 지속적 패널을 사용하지만, 서식 패널에게 내가 컨테이너에 추가 할 때마다 다시하지 않을 때 작동하는 것 않는다는 것입니다 패널())
• 에서 doLayout()

아래 작업 예제를 참조하십시오 :

<script type="text/javascript" language="javascript"> 
    Ext.namespace("Ext.ARA"); 

    Ext.onReady(function() 
    { 
    Ext.ARA.AddFormPanelDoesntWorkA = function() 
    { 
     Ext.ARA.ContainerPanel.removeAll(false); 
     Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelA); 
     Ext.ARA.ContainerPanel.doLayout(); 
    } 

    Ext.ARA.AddFormPanelDoesntWorkB = function() 
    { 
     Ext.ARA.ContainerPanel.removeAll(false); 
     Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelB); 
     Ext.ARA.ContainerPanel.doLayout(); 
    } 

    Ext.ARA.AddFormPanelDoesWorkA = function() 
    { 
     Ext.ARA.ContainerPanel.removeAll(true); 
     Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]})); 
     Ext.ARA.ContainerPanel.doLayout(); 
    } 

    Ext.ARA.AddFormPanelDoesWorkB = function() 
    { 
     Ext.ARA.ContainerPanel.removeAll(true); 
     Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]})); 
     Ext.ARA.ContainerPanel.doLayout(); 
    } 

    Ext.ARA.FormPanelA = new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]}); 
    Ext.ARA.FormPanelB = new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]}); 

    Ext.ARA.ContainerPanel = new Ext.Panel 
    ({ 
     title:'Container Panel', 
     bbar:new Ext.Toolbar 
     ({ 
     items: 
     [ 
      {text:'AddFormPanelDoesntWorkA', handler:Ext.ARA.AddFormPanelDoesntWorkA}, 
      {text:'AddFormPanelDoesntWorkB', handler:Ext.ARA.AddFormPanelDoesntWorkB}, '->', 
      {text:'AddFormPanelDoesWorkA', handler:Ext.ARA.AddFormPanelDoesWorkA}, 
      {text:'AddFormPanelDoesWorkB', handler:Ext.ARA.AddFormPanelDoesWorkB} 
     ] 
     }) 
    }); 

    Ext.ARA.Mainframe = new Ext.Viewport({layout:'fit', items:[Ext.ARA.ContainerPanel]}); 
    }); 
</script> 

적절한 방법으로는 무엇을 ExtJS에서 영구 양식 패널을 사용합니까? 여기서 내가 뭘 잘못하고 있니?

Answer 1

나는 당신의 예를 시험해 보았고 약간의 비틀기를 만들었고 제대로 작동하지 않았다. 그런 다음 내가 이런 종류의 디스플레이에 CardLayout을 사용했다는 것을 깨달았다. '마법사'유형의 디스플레이를 사용하여 시연되는 LayoutBrowser을 참조하십시오. 나는 그것이 당신에게 필요한 것을 줄 것이라고 생각합니다.