Discussion :

[sekaijin]

Bonjour.

j'avais un petit pb avec les dataview
lorsqu'on ajoute un élément à une data view celui-ci est placé dans un div en dessous du précédent. avec un CSS on peut le positionner automatiquement comme flottant à droite du précédent

tout cela laisse très peu de marge de manoeuvre pour agencer finement les éléments.

je voulais pouvoir les placer ainsi

Code :

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

1
2
3
1 4 7
2 5 8
3 6 9

et non seulment

Code :

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

1
2
3
1 2 3
4 5 6
7 8 9

si on se réfère aux systemes d'écriture, je dirais que l'agencement des dataview (avec ccs ad-hoc) correspond à notre mode d'écriture de gauche à droit et de haut en bas.
pour désigner le sens d'écriture on utilise souvant 'lr-tb' soit left to right and top to bottom.
l'écriture arabe par exemple est 'rl-tb' et le japonais traditionnel 'tb-rl'

je dirais donc que ce que je cherchais à faire c'est 'tb-lr' top to bottom and left to right.

j'ai donc tanté l'expérience à partir des exemples fournis par ExtJS. en regardant de plus près un plugin déjà présent retouche l'agencement des éléments. il ne le fait pas pour définir un sens de rendu mais pour positionner les éléments via un animation.
ce plugin pour pouvoir animer les éléments utilise une position absolue dans la vue. alors que nativement il s'agit d'une position relative.

en modifiant le calcul des positions absolues on peu obtenir les agencement de son choix.
j'ai donc modifié Animated.js pour obtenir cela.

restait un petit problème l'animation entre jeu uniquement lorsqu'on ajoute / supprime des éléments dans le store. mais pas lors du rendu initial.

je suis parvenu à activer l'animation à l'affichage mais le calcul des positions se fait à partir des tailles des objets affichés et lors du permier rendu ils ne le sont pas. les positions étaient fausses.

je n'ai pas trouvé d'autre solution que de définir la taille des élément dans le CSS

pour activer un agencement il reste à le paramétre à la construction

Code javascript :

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

plugins: [Ext.create('Ext.ux.DataView.Animated', {layout:'tb-lr'})],

ainsi le DataView utilise un agencement autre que celui par defaut

je vous joint mes fichier modifiés ce sont ceux des exemples ExtJS.
A+JYT