Discussion :

[Mako 5013]

Bonjour,

Une fois n'est pas coutume, un soucis assez délicat à expliquer...Ma page est composée de la manière suivante (plus de détail ici) : un viewport avec trois régions (nord, ouest et centre). La région ouest est redimensionnable (en largeur). Dans ma région centre, j'ai des panels (par exemple des formPanel ou bien des gridPanel) qui ont la propriété 'autoWidth: true'.

Le soucis est le suivant. Lorsque j'agrandis ma région ouest, cela diminue d'autant ma région centre (normal...), mais il y a un problème pour les panels de ma région centre. En effet, l'autroScroll étant activé pour mes régions, j'ai une barre horizontale en bas (ça, je la veux, pas de soucis), mais lorsque je scrolle vers la droite pour voir la fin de mon panel (ceux qui sont dans la région centre), le header de ce dernier ne va pas jusqu'au bout. En d'autres termes, le header de ces panels se contentent de s'afficher sur la partie initialement visible à l'écran, ce qui est particulièrement laid lorsque l'on scroll vers la droite...

Si quelqu'un a compris quelques choses à mes élucubrations et a une idée...

Mako

[Mako 5013]

Devant l'enthousiasme des foules, je vais reformuler cela plus simplement...

Comment faire pour que les headers de panels s'affichent sur toute la largeur du panel, et pas seulement sur la partie visible à l'écran initialement ?

Est-il possible d'activer l'autoScroll verticalement ou horizontalement uniquement ? Concrètement, je voudrais pouvoir scroller verticalement (car mes panels peuvent être ouverts ou fermés), mais empêcher le scroll horizontal, ce qui empêcherait les utilisateurs d'aller voir le défaut d'affichage.

Merci.

Mako

[takitano]

Bonjour mako,

tu as deux solutions qui sont en fait deux manières de traiter un problème de mise en place de panel, je te conseilles de choisir la deuxième ...

1. tu dimensionnes tous les éléments qui se trouves dans ta zone centrale(tu imposes un height et un width), et l'élément centrale va se dimensionner automatiquement.

2. tu laisses les height et les width 'flottant', et tu imposent le height et width a ton element central...

pkoi la 2ieme solution est meilleur, parce que, tu n'as qu'un seul réglage à faire ... ^^

[Mako 5013]

Alors, je vais rentrer un peu plus dans le détail.

Ma région 'centre' à un width fixé à 85% (pas de height précisé, mais j'ai pas de soucis pour ça). Mes panels qui sont contenus dedans sont tous en autoWidth et autoHeight.

Ci-joint une capture du problème rencontré lorsque je dois scrollé vers la droite (les rectangles rouges).

Mako

[takitano]

je suis pratiquement sur que c'est un pb de layout ...

tous tes contenaires ne sont pas liés les uns aux autres ...

[Mako 5013]

tous tes contenaires ne sont pas liés les uns aux autres ...

Admettons. Et comment je fais pour les lier les uns aux autres ?

Mako

[takitano]

il faut que chaque contenaire enfant soit sous un layout mère ...

tu modifies la zone centre de ton panel, et bien

par exemple ton grid n'indique pas qu'il est le seul element de ta zone centre (avec un layout fit), alors un modification de ta zone centre n'entrainera pas la modif de ton grid ... (et restera le meme ... )

tu devrais poster du code ... histoire d y voir plus claire ...

[Mako 5013]

Merci pour les explications.

Suite à des conseils issus du forum de Ext JS (voir ici), j'ai pu identifier la cause du problème.

Comme tu le dis takitano, le fait que mes conteneurs ne soient pas liés est un soucis. En outre, je mixais des choses qui ne devaient pas l'être (autoWidth et anchor, contentEl et un layout, etc.). Je vais faire un petit état des lieux de la situation actuelle.

J'ai deux fichiers jsp, un contentLayout.jsp et un body.jsp, dont le code est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var viewport = new Ext.Viewport({
     layout: 'border',
     items: [{
          region: 'center',
          width: 1100,
          layout: 'anchor',
          contentEl: 'divCentre' // Il faudrait que je remplace ceci apparemment
     }]
});

La div 'divCentre' me sert à insérer (via Struts) une autre page jsp, en l'occurence body.jsp, dont le code est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
var panel = new Ext.form.FormPanel({
     anchor: '-' + (Ext.getScrollBarWidth() + 1), 
     layout: 'column',
     items: [{
          columnWidth: .5,
          layout: 'form',
          items: [
               // mon formulaire
          ]
     }]
});

Je pense qu'actuellement, le gros soucis vient du 'contentEl' de mon viewport, et du fait que j'insère ma page jsp, ce qui me fait retomber sur le problème souligné, à savoir que mes conteneurs ne sont pas bien liés entre eux.

Concrètement, avec ce code-ci, deux de mes trois situations sont satisfaites. A savoir: à l'affichage initial de ma page, mon formPanel prends toute la place qui lui est attribué au centre, pas de soucis. Si je cache ma région ouest (collapse), mon panel occupe tout l'espace sans problème. Le seul cas qui n'est pas satisfait, c'est lorsque j'agrandis cette même région ouest, mon panel dépasse sur le côté (normal), j'ai une scrollbar horizontale pour y accéder (normal), mais le rendu est assez laid (pas normal), comme on peut le voir sur l'image ci-jointe (rectangles rouges).



Mako

[takitano]

a ta place, je remplace

contentEl: 'divCentre'

par items:[panel ]

[Mako 5013]

Ah bah si je pouvais...Je le ferais sans hésiter !

Mais comme dit précédemment, c'est deux fichiers séparés, et là, je prends l'exemple d'un panel, mais dans l'absolu, je ne sais pas trop ce que je peux avoir dans ma région centre.

Cela vient de l'utilisation de Struts. J'ai un fichier (contentLayout) qui me définit des régions, et quand je demande une URL, il me met les bonnes jsp aux bons endroits (en l'occurrence, le menu et le header c'est toujours la même jsp, mais le centre, cela change tout le temps).

Mako

[takitano]

ben il faut t assurer que le panel soit créé avec ton viewport ...

que ton code soit sur 2 fichiers différents, n'est pas un pb ...

[Mako 5013]

Ce que je voulais dire, c'est que je ne peux pas mettre tout de suite

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

items:[panel]

dans mon viewport, parce que je ne peux pas savoir à l'avance ce qui aura comme panel dans ma zone centrale (puisque cela dépend de l'écran sur lequel je me trouve).

Mako

[takitano]

dans mon viewport, parce que je ne peux pas savoir à l'avance ce qui aura comme panel dans ma zone centrale (puisque cela dépend de l'écran sur lequel je me trouve).

Mako

Il faut le dire avant, je ne peux pas tout deviner ... !

bon ok ...
tu rajoutes un id dans ta zone centre ... j'ai mis 'bipbip'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
var viewport = new Ext.Viewport({
     layout: 'border',
     items: [{
          region: 'center',
          width: 1100,
          layout: 'anchor',
         id:'bipbip'
     }]
});

puis au niveau de ton panelForm, tu fais un truc du genre ...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
//tu effaces tout ce qu'il y a dans ta zone bipbip
Ext.getCmp('bipbip').removeAll();
//tu rajoutes ton formulaire ... 
Ext.getCmp('bipbip').add(panel);

ps: tu devrais modifier le layout de ton panelform. remplacer 'column' par 'form'.

[Mako 5013]

Il faut le dire avant, je ne peux pas tout deviner ... !

C'était un test

Sinon, l'idée à l'air tentante, mais concrètement, mon formPanel ne s'affiche pas...

Mako

[takitano]

oui, normale, j'ai oublié de te mettre:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

Ext.getCmp('bipbip').doLayout();

[Mako 5013]

Je me doutais bien qu'il manquait un truc dans le genre...

En tout cas, cela fonctionne nickel, merci beaucoup !

Mako

[takitano]

ouep tres bien

et encore désolé pour cette oublie ...

[Mako 5013]

Tu ne vas tout de même pas t'excuser de ne pas m'avoir sorti de la mouise du premier coup non ?!?

Juste histoire de pinailler, est-ce qu'il est possible de savoir si on a une scrollbar présente sur l'écran ? Le but étant de modifier la valeur de 'anchor' suivant s'il y a ou non scrollbar (étant donné que mes panels sont collapsible).

Mako

[takitano]

Juste histoire de pinailler, est-ce qu'il est possible de savoir si on a une scrollbar présente sur l'écran ? Le but étant de modifier la valeur de 'anchor' suivant s'il y a ou non scrollbar (étant donné que mes panels sont collapsible).

>>je pense qu'un layout accordion serait plus aproprié ...
a toi de voir ca ...

[Mako 5013]

Il est vrai que ça pourrait être une solution...Toutefois, on doit pouvoir avoir plusieurs de ces panels dépliés en même temps, c'est possible avec un accordéon ? (J'avais l'impression que seul celui sélectionné était déplié).

Mako