Taille panel collapsible

[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 :

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 :

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.

[JulienFio]

Il y'a plusieurs points que je ne saisi pas très bien.

Déjà, pourquoi cette partie dans l'event expand de ton centre ?

Code :

1
2
3
4
5
6
Ext.getCmp('sud1').onCollapse(
		{
			animate: true,
			collapseMode: 'mini'
		}
	);

Pourquoi ne pas définir ces paramètres dans le constructeur de ton panel Sud ?

Code :

1
2
3
4
5
 
xtype: 'tonPanelSud',
collapsible: true,
animate: true,
collapseMode: 'mini'

Et si j'ai bien compris, tu souhaites qu'à l'expand de ton centre, ta région Sud se collapse ?
Si c'est le cas je te conseil plutôt de faire comme ceci:

Code :

1
2
3
4
myEvent.on('expand', function(args) {
	Ext.getCmp('sud1').collapse(true);
	args.setTitle('Resultats');
});

et lors du collapse de ton Centre :

Code :

1
2
3
4
5
myEvent.on('collapse', function(args) {
Ext.getCmp('sud1').expand(true);	Ext.getCmp('sud1').setHeight(Ext.getCmp('MyPanel3Ui').getInnerHeight() - 25);
 
	args.setTitle('Comparaison');
});

Esnuite, si tu souhaite replacer ton panel sud correctement, c'est à dire qu'il commence à partir du haut de ton body et qu'il prenne toute la page, tu peux utiliser la methode setPosition( Number left, Number top ). En spécifiant ton x/y tu peux placer ton panel où tu veux dans ton body. C'est ce que j'ai fait pour m'en sortir, hormis un problème de fluidité ça fonctionne très bien

[abraxis]

Pour le animate et le collapsemode, c'était juste des tests (qui ne portaient pas leurs fruits)

Tu a bien compris se que je cherche à faire.
Par contre si je ne met pas onCollapse() l'action ne se fait pas :/ idem pour le onExpand()

[JulienFio]

Tu veux dire que ce code ne fonctionne pas ?

Code :

Ext.getCmp('sud1').expand(true);

tu as des erreurs qui ressortent ?

Essayes ceci sinon :

Code :

1
2
3
4
myEvent.on('beforeexpand', function(args) {
	Ext.getCmp('sud1').collapse(true);
	args.setTitle('Resultats');
});

[abraxis]

Non il ne me retourne aucune erreur.

Je viens d'essayer et ça fonctionne parfaitement !

Merci à toi ^^