1

晚上好，亲爱的程序员！

我对 ExtJS 中的持久面板有疑问。我有几个要在单个容器面板中显示的表单面板。显示的表单取决于用户正在编辑的对象类型。据我了解，这可以通过以下3个语句来实现：

  • 全部删除（真）
  • 添加（持久表单面板）
  • 布局（）

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

  • 全部删除（真）
  • 添加（新表单面板（））
  • 布局（）

请参阅下面的工作示例：

<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 中使用持久表单面板的正确方法是什么？我在这里做错了什么？

4

1 回答 1

0

我尝试了您的示例并进行了一些调整，但没有让它工作，然后我意识到我已经使用CardLayout来进行这种显示。请参阅使用“向导”类型的显示演示的LayoutBrowser 。我想它会给你你所需要的。

于 2011-02-28T17:41:26.343 回答