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。我认为它会给你你需要的东西。

ExtJS持久性面板（无autoDestroy）

1 个答案: