Динамическое добавление и удаление одной и тойже вкладки в Ext.tab.Panel
 

Имеется Ext.FormPanel которую и надо динамически добавлять и удалять из Ext.tab.Panel.

var PanelPassport = new Ext.FormPanel({
        title: txtPassport,
        frame: true,
        monitorValid: true,
        defaultType: 'textfield',
        items: [
            {
                xtype: 'textfield', fieldLabel: txtSeries, name: "DirContractorPasSeries", width: 420, allowBlank: false
            },
            {
                xtype: 'textfield', fieldLabel: txtNumber, name: "DirContractorPasNumber", width: 420, allowBlank: false
            },
            {
                xtype: 'textfield', fieldLabel: txtPinCode, name: "DirContractorPasPinCode", width: 420, allowBlank: false
            },
            {
                xtype: 'textfield', fieldLabel: txtIssued, name: "DirContractorPasIssued", width: 420, allowBlank: false
            },
            {
                xtype: 'datefield', format: "d.m.y", maxValue: new Date(), fieldLabel: txtDate, name: 'DirContractorPasDate', allowBlank: false
            }
        ]
     });

Ну и сам Ext.tab.Panel, в него и будет добавляться PanelPassport

var DirContractorTabPanel = new Ext.create("Ext.tab.Panel", {
        region: "center",
        items: [PanelGeneral, PanelGridBankAccount, PanelPassport],
        bodyStyle: 'background-color: transparent !important'
    });

Есть комбоБокс.
При выборе срабатывает событие:

listeners: {
  select: {
    fn: function (combo, value) {
      if (combo.getValue() == 1) {
        DirContractorTabPanel.remove(PanelPassport);
      }
      else {
        DirContractorTabPanel.add(PanelPassport);
      }
...

Ну так в чём ошибка.
Закладку добавили - всё работает !!!
Поменяли тип контрагента - закладка удалилась - работает !!!
И, опять, поменяли тип контрагента - закладка НЕ добавилась или добавилась но без текстовых полей (с гюками) !!!

Может кто-то и свежим взглядом глянет на мою писанину ... и найдёт ошибочку )))

Решил задачку так:

function fnPanelPassportAdd() {
        var PanelPassport = new Ext.FormPanel({
            title: txtPassport,
            id: "PanelPassport",
            frame: true,
            monitorValid: true,
            defaultType: 'textfield',
            items: [
                {
                    xtype: 'textfield', fieldLabel: txtSeries, name: "DirContractorPasSeries", width: 420, allowBlank: false
                },
                {
                    xtype: 'textfield', fieldLabel: txtNumber, name: "DirContractorPasNumber", width: 420, allowBlank: false
                },
                {
                    xtype: 'textfield', fieldLabel: txtPinCode, name: "DirContractorPasPinCode", width: 420, allowBlank: false
                },
                {
                    xtype: 'textfield', fieldLabel: txtIssued, name: "DirContractorPasIssued", width: 420, allowBlank: false
                },
                {
                    xtype: 'datefield', format: "d.m.y", maxValue: new Date(), fieldLabel: txtDate, name: 'DirContractorPasDate', allowBlank: false
                }
            ]
        });
        DirContractorTabPanel.add(PanelPassport);
    }
    function fnPanelPassportRemove() {
        var tab = Ext.getCmp("PanelPassport"); DirContractorTabPanel.remove(tab, true);
    }

Забыл показать кусок кода:

listeners: {
  select: {
    fn: function (combo, value) {
      if (combo.getValue() == 1) {
        fnPanelPassportRemove();
      }
      else {
        fnPanelPassportAdd();
      }
...