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

Question

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

La première fois qu'un formulaire est sélectionné, tout va bien. 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 s'effectue dans la fonction selectNode et j’ai tout essayé sans grand résultat.

Modifier , comme l'a souligné Jim Barrows, il serait préférable d'instancier un composant dans la fonction de création. J’ai hésité à le faire car c’est un changement assez important dans ma vraie application et je voulais en fait garder les instances pour faciliter la navigation entre elles.

Maintenant que j'ai écrit ceci, je me suis rendu compte que pour faire correctement, je devrais le stocker sur le serveur, peu importe si le navigateur accède à une autre page ...

Modifier J'ai apporté la modification voulant que les formulaires soient toujours instanciés, il est donc beaucoup plus extensible 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 () détruit en fait tous les composants. Ainsi, lorsque la création est appelée, il n'y a pas de retour à effectuer, donc rien n'est affiché. 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 dans la création.