Le formulaire extjs n'est pas restitué dans un panneau la deuxième fois qu'il est sélectionné

Question

J'ai une disposition de base où différents composants peuvent être sélectionnés à l'aide d'une vue arborescente, puis affichés dans le panneau principal. Cela fonctionne bien pour tous mes composants (comme les grilles), mais des problèmes avec des formes.

La première fois qu'un formulaire est sélectionné, il est correct, dès que vous essayez de le sélectionner à nouveau, rien n'est rendu.

La démo est disponible ici et il y a un lien vers le javascript en haut de la page.

http://www.somethingorothersoft.com/ext

La sélection d'un composant se produit dans la fonction selectNode et je l'ai essayé tout ce que je pouvais sans grand résultat.

Modifiez car Jim Barrows a souligné qu'il serait préférable d'instancier un composant dans la fonction de création. J'ai hésité à le faire car il s'agit d'un changement assez important dans mon application réelle et je voulais vraiment garder les instances autour pour faciliter la navigation entre eux.

Maintenant que je l'ai écrit, je compris que pour faire état correctement, je dois stocker sur le serveur, quel que dans le cas où le navigateur accède à une autre page ...

Modifier je fait le changement toujours instancier les formes comme si, il est beaucoup plus extJSy maintenant :):

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

Votre problème est ici:

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

et ici:

create: function() { return this; } 

Le cp.removeAll() ne en fait détruire tous les composants. Donc quand le create est appelé, il n'y a pas de retour, donc rien ne s'affiche. Le composant viewport détruit automatiquement tout élément supprimé et le panneau hérite de cette fonctionnalité. Vous pouvez définir autoDestory sur false ou en créer un nouveau à l'intérieur de create.