Постоянные панели ExtJS (без автоДестроя) - PullRequest
Новая
       7

Постоянные панели ExtJS (без автоДестроя)

1 голос
/ 04 января 2011

Добрый вечер дорогие коллеги-программисты!

У меня вопрос по поводу постоянных панелей в 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? Что я тут не так делаю?

1 Ответ

0 голосов
/ 28 февраля 2011

Я попробовал ваш пример и сделал несколько настроек, но так и не получил его, а потом понял, что использовал бы CardLayout для такого рода отображения. См. LayoutBrowser , где это демонстрируется с использованием типа отображения «Мастер». Я думаю, что это даст вам то, что вам нужно.

...