ExtJS持久面板（无自动销毁）

晚上好，亲爱的程序员们

我有一个关于ExtJS中持久化面板的问题。我有几个表单面板，我想在单个容器面板中显示它们。显示的表单取决于用户正在编辑的对象类型。据我所知，这可以通过以下三种说法来实现：

• removeAll（真）
• 添加（持久窗体面板）
• doLayout（）

问题是这似乎不起作用。如果使用两个不同的持久化表单面板，则它们都会粘附到容器面板。奇怪的是，当我不使用持久化面板，而是在每次将表单面板添加到容器时重新创建表单面板时，它似乎确实起作用：

• 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>

Ext.namespace（“Ext.ARA”）；
Ext.onReady（函数（）
{
Ext.ARA.AddFormPanelDoesntWorkA=函数（）
{
Ext.ARA.ContainerPanel.removeAll（假）；
外部ARA.集装箱面板添加（外部ARA.表格面板A）；
Ext.ARA.ContainerPanel.doLayout（）；
}
Ext.ARA.AddFormPanelDoesntWorkB=函数（）
{
Ext.ARA.ContainerPanel.removeAll（假）；
外部ARA.集装箱面板添加（外部ARA.表格面板B）；
Ext.ARA.ContainerPanel.doLayout（）；
}
Ext.ARA.AddFormPanelDoesWorkA=函数（）
{
Ext.ARA.ContainerPanel.removeAll（真）；
add（new Ext.form.FormPanel（{title:'FormPanel A'，padding:5，items:[new Ext.form.TextField（{fieldLabel:'Panel A Field'，anchor:'100%}）]）；
Ext.ARA.ContainerPanel.doLayout（）；
}
Ext.ARA.addFormPanelDoesWorldKB=函数（）
{
Ext.ARA.ContainerPanel.removeAll（真）；
add（新的Ext.form.FormPanel（{title:'FormPanel 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:'FormPanel 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=新的外部面板
({
标题：“集装箱面板”，
bbar：新的外部工具栏
({
项目：
[
{text:'AddFormPanelDoesntWorkA'，处理程序：Ext.ARA.AddFormPanelDoesntWorkA}，
{text:'AddFormPanelDoesntWorkB'，处理程序：Ext.ARA.AddFormPanelDoesntWorkB}，'->'，
{text:'AddFormPanelDoesWorkA'，处理程序：Ext.ARA.AddFormPanelDoesWorkA}，
{text:'addFormPanelDoesWorldKB'，处理程序：Ext.ARA.addFormPanelDoesWorldKB}
]
})
});
Ext.ARA.Mainframe=new Ext.Viewport（{layout:'fit'，items:[Ext.ARA.ContainerPanel]}）；
});

---

在ExtJS中使用持久化表单面板的正确方法是什么？我在这里做错了什么？

我尝试了你的例子，做了一些调整，但没有成功，然后我意识到我会使用一个用于这种显示的。请参阅使用“向导”类型的显示进行演示的位置。我想它会满足你的需要