components missing after replacing panel contents

[nutflakes]

Hi,

I'm trying to implement a dynamic layout.
So I defined a borderlayout with a basic toolbar in the north panel.
On click to a navigation item the content of the center panel is replaced.
But first all existing components are removed.

My problem is now that I want to load the components via function.

Here is my source


Ext.namespace('myNamespace');

myNamespace.layout = function() {
var titleSelect;

var loadTitleSelect = function() {
if(!titleSelect) {
// erzeugen
titleSelect = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ['id', 'salutation'],
forceSelection: true,
data : [
[1, 'Dr.'],
[2, 'Professor']
]
}),
fieldLabel: 'Titel',
displayField:'salutation',
typeAhead: false,
mode: 'local',
editable: false,
triggerAction: 'all',
emptyText:'bitte wählen',
selectOnFocus:true,
anchor:'95%'
});
};

return titleSelect;
};

var loadProfile = function() {
clearAll();

eastPanel.hide();

setBorder(centerPanel, 1);

var tabPanelConfigs = {
autoTabs:true,
activeTab:0,
deferredRender:false,
bodyStyle:'padding:5px',
autoScroll: true,
style: 'min-width: 600px;',
shadow: false,
frame: false,
border: false
};

tabPanelConfigs.items = [];
tabPanelConfigs.items.push(loadUserProfile());

centerPanelContent = new Ext.TabPanel(tabPanelConfigs);

centerPanel.add(centerPanelContent);
centerPanel.doLayout();

};

var userProfile;

var loadUserProfile = function() {
userProfile = new Ext.form.FormPanel({
labelAlign:'top',
title: 'Nutzerprofil',
bodyStyle:'padding: 5px;',
width: 600,
autoHeight: true,
border: false,
items: [{
layout:'column',
border:false,
items:[{
width: 250,
layout: 'form',
border:false,
items: [{
xtype:'ux-radiogroup',
fieldLabel:'Anrede',
name:'salutation',
height: 20,
horizontal:true,
radios:[{
value:1,
boxLabel:'Herr',
checked:true
}, {
value:2,
boxLabel:'Frau'
}]
}, {
xtype: 'textfield',
fieldLabel: 'Vorname',
name: 'firstname',
value: '',
allowBlank: false,
anchor:'95%'
}, {
xtype: 'textfield',
fieldLabel: 'Funktion',
name: 'function',
value: '',
allowBlank: false,
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Nutzername',
name: 'username',
value: '',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Konzessionär',
name: 'retailer',
value: '',
anchor:'95%',
disabled: true,
disabledClass: 'disabledTextField'
}]
},{
width: 250,
layout: 'form',
border:false,
items: [
loadTitleSelect(),
{
xtype: 'textfield',
fieldLabel: 'Nachname',
name: 'lastname',
value: '',
allowBlank: false,
anchor:'95%'
}, {
xtype: 'textfield',
fieldLabel: 'Position',
name: 'position',
value: '',
allowBlank: false,
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Alias',
name: 'alias',
value: '',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Niederlassung',
name: 'pos',
value: '',
anchor:'95%',
disabled: true,
disabledClass: 'disabledTextField'
}]
}]
}], // items: [
buttons: [{
text:'Save',
handler: function() {
alert("speichere daten");
}
}]
});

return userProfile;
};

var clearAll = function() {
westPanel.hide();

if(eastPanelContent) {
if(eastPanel.findById(eastPanelContent.getId()))
eastPanel.remove(eastPanelContent);
};

eastPanel.hide();

if(centerPanelContent) {
if(centerPanel.findById(centerPanelContent.getId() ))
centerPanel.remove(centerPanelContent);
};

centerPanel.ownerCt.doLayout();

}

}();


As you can see in the two screenshots the title combobox is missing.
In firebug it does not even appear in the source. What is wrong here?
Is it because i remove the centerPanelContent?

I'm german so please excuse my English :)

Thanks a lot!
nutflakes

[devnull]

I am guessing that the var titleSelect is not working as you think it will.
When the form is replaced, the combo is destroyed, but the var will still be defined (but empty).
Why not just put the combobox in with the rest of the form constructor config?

[nutflakes]

thanks for your reply!

I know the way you suggest is working but the code will become very unclear and this is what I wanted to provide.
Hmm as this will be a prototype only I will put the components in.

nutflakes

[devnull]

Actually I think the code is much harder to read when the layout is broken up into multiple sections. In my apps I try to construct the layout using as few objects as possible.