ExtJS постоянные панели (нет autoDestroy)

Question

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

У меня есть вопрос относительно постоянных панелей в ExtJS. У меня есть несколько панелей форм, которые я хочу отображать внутри одной панели контейнера. Отображаемая форма зависит от типа объекта, который пользователь редактирует. Насколько я понимаю, это может быть достигнуто с помощью следующих 3 операторов:

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

Что такое правильный способ использовать постоянные панели форм в ExtJS? Что я здесь делаю неправильно?

Answer 1

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