extjs form does not get rendered in a panel the second time it is selected

Question

I have a basic layout where different components can be selected using a tree view and then get rendered in the main panel. This works fine for all of my components (like grids) but glitches with forms.

The first time a form is selected it is fine, as soon as you try to select it again nothing gets rendered.

The demo is available here and there is a link to the javascript at the top of the page.

http://www.somethingorothersoft.com/ext

The selection of a component happens in selectNode function and I have tried everything i could without much result.

Edit as Jim Barrows pointed out it would be better to instantiate a component in the create function. I have been hesitant to do that as that is a fairly major change in the my real app and I wanted to actually keep the instances around for ease of navigation between them.

Now that I have written this I realised that to do state properly I would have to store it on the server regardless in case the browser navigates to another page...

Edit I made the change to always instantiate the forms like so, it's much more extJSy now :) :

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

Your problem is here:

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();
};

and here:

create: function() { return this; } 

The cp.removeAll() does in fact destroy all components. So when the create is called, there is no this to return, so nothing gets shown. The viewport component does automatically destroy anything removed, and the panel inherits this functionality. You can either set autoDestory to false, or do a new inside the create.