1

親愛なるプログラマーの皆さん、こんばんは！

ExtJS の永続パネルについて質問があります。単一のコンテナー パネル内に表示したいフォーム パネルがいくつかあります。表示されるフォームは、ユーザーが編集しているオブジェクトのタイプによって異なります。私が理解している限り、これは次の 3 つのステートメントで実現できます。

  • removeAll(真)
  • 追加 (永続的なフォーム パネル)
  • doLayout()

問題は、これが機能していないように見えることです。2 つの異なる永続フォーム パネルを使用する場合、それらは両方ともコンテナー パネルに固定されます。奇妙なことに、永続的なパネルを使用しない場合でも機能するように見えますが、コンテナーに追加するたびにフォーム パネルを再作成します。

  • removeAll(真)
  • add(新しいフォーム パネル())
  • 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で永続的なフォームパネルを使用する適切な方法は何ですか? ここで何が間違っていますか？

4

1 に答える 1

0

私はあなたの例を試し、いくつかの調整を行いましたが、それが機能しませんでした。それから、この種の表示にCardLayoutを使用したことに気づきました。「ウィザード」タイプのディスプレイを使用して示されているLayoutBrowserを参照してください。私はそれがあなたに必要なものを与えると思います。

于 2011-02-28T17:41:26.343 に答える