collapseMode [ExtJS 3.x]

Version imprimable

27/03/2012, 18h19
abraxis

collapseMode [ExtJS 3.x]

Bonjour,

Je viens de mettre en place une région sud dans un panel avec l'option

Code:

collapseMode: 'mini'

mais je voudrais supprimer la mini flèche qui reste et supprimer aussi le lien pour expand le panel afin que le bouton prévu à cet effet (mis en place dans une bbar de la région centre) puisse être le seul à avoir l'action d'expand mon panel sud.
Pour le mini flèche je pense qu'avec le CSS cela devrait être possible mais pour le lien je ne vois pas trop comment faire...

Si vous aviez une petite idée, je suis preneur.

Merci par avance

Hello,

Essaye avec ceci :

Code:

1
2
3
4
split: true,
collapsible: true,
collapseMode: 'mini',
hideCollapseTool: true

28/03/2012, 09h59
abraxis

Bonjour,

Cela fonctionne très bien si je ne met pas le

Code:

collapseMode: 'mini'

:/

Fait un render de ton panel en collapsed :

Code:

collapsed: true

Ensuite derrière ton bouton utilise
Code:

1 2 3 4 5 6 //cacher avec une animation et en choisissant une direction Ext.getCmp('idDeMonPanel').collapse(Ext.Component.DIRECTION_TOP, true) //afficher le panel Ext.getCmp('idDeMonPanel').toggleCollapse()

28/03/2012, 19h00
abraxis

Par défaut mon sud est déjà collapse.
Pour supprimer la petite flèche quand mon panel est ouvert (expand) j'ai supprimé la ligne

Code:

split: true

mais une fois que je le referme j'ai toujours cette petite flèche.

ne précise plus à ton panel qu'il est collapsible et n'utilise plus que pour le réduire ou bien le restaurer:
Code:

1 2 3 4 5 //cacher avec une animation et en choisissant une direction Ext.getCmp('idDeMonPanel').collapse(Ext.Component.DIRECTION_TOP, true) //afficher le panel Ext.getCmp('idDeMonPanel').toggleCollapse()

Voila mon panel :

Code:

1
2
3
4
5
6
7
8
9
10
11
var panelSud = new Ext.Panel({
	region :'south',
	collapsed: true,
	collapseMode: 'mini',
	// collapsible: true,
	height: 150,
	miniSize: 50,
	// split: true,
	// hideCollapseTool: true,
	layout: 'border',
	border: false

Je précise aussi que j'utilise ce panel via des clones (je ne sais pas si cela peux changer quelques chose)

Et voici le handler de mon bouton :

Code:

1
2
3
4
5
6
7
8
9
10
11
if (panelSudClone.collapsed == false)
				{
					this.setText('glop glop');
					panelSudClone.collapse(Ext.Component.DIRECTION_TOP, true);
				}
				else
				{
					this.setText('pas glop pas glop');
					panelSudClone.expand(Ext.Component.DIRECTION_TOP, true);
					panelSudClone.toggleCollapse();
				}

28/03/2012, 20h54
chaya
pour supprimer tout élément graphique relatif au collapse/expand supprime :
Code:

1 2 3 collapsed: true, collapseMode: 'mini',
Laisse le bouton gérer le collapse. Enfin c'est ce que tu souhaites, et fonctionne t-il comme tu le souhaites ?
29/03/2012, 09h57
abraxis

Le fonctionnement n'est pas le bon.
Il faut que par défaut la région sud soit collapse et que la barre de "titre" soit la moins visible possible.
Ensuite via l'action du bouton je puisse ouvrir ou fermer le panel selon s'il est déjà ouvert ou pas.
02/04/2012, 08h58
chaya

Le hide sur le header d'un panel bug, cela ne cache que le texte mais l'on voit toujours la barre de fond grise.

Par contre ce que tu peux faire à la place d'un expand ou bien collapse c'est un show / hide sur le panel en question , cela aura exactement le même effet et cela fonctionne correctement !
02/04/2012, 14h29
abraxis

Je n'avais pas pensé hide/show.

Je viens de les mettre en place et cela fonctionne parfaitement.

Merci a toi Chaya pour ton aide.