форма extjs не отображается на панели при втором выборе

Question

У меня есть базовый макет, в котором различные компоненты могут быть выбраны с помощью древовидного представления, а затем визуализированы на главной панели. Это прекрасно работает для всех моих компонентов (таких как сетки), но глюки с формами.

При первом выборе формы все в порядке, как только вы попытаетесь выбрать ее снова, ничто не будет обработано.

Демонстрация доступна здесь, а в верхней части страницы есть ссылка на javascript.

http://www.somethingorothersoft.com/ext

Выбор компонента происходит в функции selectNode, и я попробовал все, что мог, без особого результата.

Изменить , как указал Джим Барроуз, было бы лучше создать экземпляр компонента в функции create. Я не решался сделать это, так как это довольно серьезное изменение в моем реальном приложении, и я хотел сохранить экземпляры для удобства навигации между ними.

Теперь, когда я написал это, я понял, что для правильного выполнения состояния мне нужно будет сохранить его на сервере независимо от того, перейдет ли браузер на другую страницу ...

Правка . Я внес изменения, чтобы всегда создавать экземпляры форм, например, теперь это намного более экстравагантно :):

components['Form1'] = { xtype:'form', "items": [
 { "name": "Rep_ID", "allowBlank": false, "fieldLabel": "Rep" },
 { "name": "Date", "allowBlank": false, "fieldLabel": "Date", "xtype": "datefield" },
 { "name": "Time", "allowBlank": true, "fieldLabel": "Time", "xtype": "timefield"}],
 "defaults": { "xtype": "textfield" }
};

components['Form2'] = { xtype: 'form', "items": [
 { "name": "Date", "allowBlank": false, "fieldLabel": "Date", "xtype": "datefield" },
 { "name": "Time", "allowBlank": true, "fieldLabel": "Time", "xtype": "timefield"}],
 "defaults": { "xtype": "textfield" }
}

Answer 1

Ваша проблема здесь:

var selectNode = function(node) {

    node.select();
    node = node.attributes;
    var newpanel = components[node.component].create();
    var cp = Ext.ComponentMgr.get('center_panel');
    cp.setTitle(node.text, node.icon);

    newpanel.hideMode = 'visibility';
    newpanel.hide();
    cp.removeAll();
    cp.add(newpanel);
    cp.doLayout();
    newpanel.show();
};

и здесь:

create: function() { return this; } 

cp.removeAll () фактически уничтожает все компоненты. Таким образом, когда вызывается create, возвращать это не нужно, поэтому ничего не отображается. Компонент области просмотра автоматически уничтожает все удаленное, и панель наследует эту функцию. Вы можете либо установить для autoDestory значение false, либо выполнить новое в процессе создания.