Bonjour.

j'ai rencontré un petit problème hier.
j'ai une appli MVC don le MainView est un panel layout border.
dans la région west se trouve une liste
par défaut dans la région centre j'ai un panel correspondant au premier élément de la liste.

mon besoin : lorsqu'on clique sur un élément remplacer le panel de la région centre par un autre.
Jusque là j'avais des éléments homogène dans ma liste et je remplaçais le contenu de mon panel.

Mais j'ai là des éléments très différent qui ont besoin de leur propre vue.

bien évidement lorsqu'un panel est affiché il est accompagné de toute sa structure MVC.
j'avais donc une MainView comme ceci
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  layout: {
      type: 'border'
  },
 
  items: [{
      region: 'north',
      xtype: 'component',
      html: 'MyApp',
      cls: 'banner'
  },{
      region: 'west',
      xtype: 'app-menu',
      collapsible: true
  },{
      region: 'center',
      xtype: 'module-main'
...
J'ai cherché dans la doc de sencha et dans les forum comment non pas remplacer le contenu mais le panel de la région centre. et j'ai trouvé bien des choses mais pas toujours très bien faites.

en fait il ne faut ni cacher le panel de la région centre ni le supprimer car il est alors compliqué de le recréer. il faut en effet repasser par le layout border qui doit être régénéré.

la solution est tellement simple que je me demande pourquoi je n'y ai pas pensé avant. c'est vraiment dans la logique de ExtJS.
premièrement mettre un conteneur dans la région centre.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  layout: {
      type: 'border'
  },
 
  items: [{
      region: 'north',
      xtype: 'component',
      html: 'MyApp',
      cls: 'banner'
  },{
      region: 'west',
      xtype: 'app-menu',
      collapsible: true
  },{
      region: 'center',
      xtype: 'container',
      layout: 'fit',
      items:[
      {
        xtype: 'module-main'
...
dans le main controller sur le click d'un élément de menu cacher le panel actif présent dans le conteneur
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
  closeCurrent: function() {
    this.current.hide();
  },
puis ajouter le nouveau panel et l'activer.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
  openPanel: function(button) {
    this.closeCurrent();
    if (undefined == this.modules[button.module]) {
      this.modules[button.module] = Ext.widget(button.module)
      this.centerRegion.add(this.modules[button.module]);
    }
    this.modules[button.module].show();
    this.current = this.modules[button.module];
  }
il n'y a plus de problème de layout vu qu'on ne touche pas à sa structure. on ne fait que remplacer le contenu de la région centre ce qui est le fonctionnement prévu par ExtJS.

A+JYT