Discussion :

[abraxis]

Bonjour,

Voilà mon problème, j'ai un center avec option collapsible et un sud avec la même option.
Par défaut mon sur est fermé.
Je voudrais que on ouvrant le sud et en fermant le centre le sud prenne toute la place.
Je ne peu pas mettre de taille fixe car selon la taille/résolution des écrans le rendu ne sera jamais le même.

Est ce que l'un d'entre vous a une idée ?

Merci par avance

[abraxis]

J'ai peu être trouver une autre solution pour arriver à mes fin.
Est il possible pour un panel qui a pour region : 'center' et l'option collapsible: true d'être replié vers le bas plustot que vers le haut ?

[JulienFio]

Je suis à peu pres dans le même cas que toi..
J'ai une région centre mais je souhaite que le collapse se fasse sur la gauche (et quand ma région de droite prenne toute la place du coup). Le redimensionnement de ma région droite ne pose pas de pb, par contre.. est-il possible de modifier la zone de collapse d'une région ?.



Petit Up du coup, je continu de chercher et posterais la solution si j'en trouve une..

[abraxis]

Moi j'ai trouvé une solution a mon problème en modifiant la taille de mon sud quand je "collapse" mon centre.

Pour ce qui est de changer de sens pour le collapse du centre je n'est rien trouver pour faire cette action. Si tu trouve n'hésite pas à donner ta solution car je suis preneur.

Je pense par contre que ma solution pourrais te venir en aide.
Sur l'expand de ta region de droite tu fais un onClollapse() de ton centre et quand tu fais un collapse de ta region droite qui prend toute la place tu lance l'action onExpand() de ton centre.

[JulienFio]

J'ai trouvé une réponse à mon probleme.

En fait j'ai déterminé 3 zones 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
18
19
20
21
22
23
items:[{
            xtype: 'panel',
            region: 'west',
            id: 'regionWest',
            collapsible: true,
            animate: true,
            width: '35%',
            layout:'row-fit' //layout perso
        },{
             title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'container',
            layout: 'fit',
            margins: '5 5 0 0'
 
        },{
            xtype: 'panel',
            region: 'east',
            width: '65%',
            layout:'row-fit',
            collapsible: true,
            frame: true
        }]

ma zone centre est en fait "invisible" et du coup ce que j'avais en zone centre devient en fait la region Est. Et comme tu dis, ne reste plus qu'à redimensionner les zones à chaque collapse/expand

Résultat:
J'ai deux zones, une à gauche (width 35%) et une à droite (width 65%) et quand j'en réduit une l'autre prend toute la place (les collapse se font sur le coté comme je le souhaitais)

[JulienFio]

Solution non parfaite, il va falloir que je joue avec du CSS car lors du collapse de ma région gauche par exemple, je procède au redimensionnement de ma région droite pour qu'elle prenne toute la place (donc modification du width de ma region droite). Le problème actuel c'est que la région droite s'agrandi par la droite et sort donc de mon body... Du coup je pense que je vais devoir passer par du css (margin/padding) pour recentrer la région... C'est pas super comme résultat, ça donne des expand/collapse pas fluide du tout.. Je vais continuer de chercher une meilleure solution (genre pouvoir paramétrer ma region centre pour qu'elle collapse/expand par la droite)

Si quelqu'un sait comment faire, je suis preneur

[abraxis]

J'ai fait la même chose que toi avec mon sur et mon centre.
Par contre moi je rencontre un problème au moment de refaire le collapse du sud et le expand du centre.
Rien ne s'affiche...
Et quand j'arrive a afficher le centre le sud ne s'affiche toujours pas :/

Voilà mon code pour le traitement du collapse et du expand :

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
myEvent = Ext.getCmp('centre1');
myEvent.on('collapse', function(args) {
	Ext.getCmp('sud1').setHeight(Ext.getCmp('MyPanel3Ui').getInnerHeight() - 25);
	Ext.getCmp('sud1').onExpand({animate: true});
	args.setTitle('Comparaison');
});
 
 
myEvent.on('expand', function(args) {
	Ext.getCmp('sud1').setHeight(150);
	Ext.getCmp('sud1').onCollapse(
		{
			animate: true,
			collapseMode: 'mini'
		}
	);
	args.setTitle('Resultats');
});

La première partie ce fait correctement (même si comme tu le dis, ce n'est pas fluide).

Si tu a une solution, je suis preneur.