Discussion :

[nikko49]

Bonsoir,

Je souhaiterais trouver un moyen d'afficher les données venant de mon Store sous forme d'une grille, mais sur plusieurs colonnes.

Je m'explique :
Au lieu d'afficher mes données simplement dans une grid et de scroller de bas en haut pour visualiser mes enregistrements, je voudrais, pour le même dataIndex, avoir 20 enregistrements sur une première colonne, puis dans la même grid, avoir mes 20 enregisrements sur une deuxième colonne, et ainsi de suite ...

NB : 20 est un exemple

Au final, le résultat ressemblerait à ça :
Data 1 Data 20 Data 40
Data 2 Data 21 Data 41
Data 3 Data 22 ......
Data 4 Data 23 .....
.... ....
Data 19 Data 39

En résumé, j'aimerais pouvoir visualiser mes données de la même manière que dans les pages d'un annuaire téléphonique.

Les pistes envisagées :

1. Utiliser un grid Panel et le configurer d'une certaine manière ?
2. Utiliser une view et un template de GridPanel ?
   
   

   Code :

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

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   Ext.define('module_contracts.view.CategoryShop', 
   {
   	extend		: 'Ext.grid.Panel',
   	alias 		: 'widget.categoryShop',
   	id			: 'categoryShop',
   	store		: 'ContractLineCategories',
    
   	tpl: 
   	[
   		'<tpl for=".">',
   		'<td id="{criterion_id}">{criterion_code}</td>',
   		'</tpl>'
   	]
   });

   Le but serait de créer un td dans ma boucle à chaque enregistrement, et pour un index multiple de 20, je crée un tr ??

Merci d'avance de tous vos précieux conseils et de vos réponses

[sekaijin]

tu te trompe de composant il ne s'agit pas d'un grid mais d'une dataView

A+JYT

[nikko49]

Merci de ta réponse

En fait, ma question était surtout aussi dans le but de savoir si quelque chose existtait et gerait ça tout seul (genre on definit un grid panel, un store et on lui dit qu'on veut que les données, toutes les 10 lignes, passent sur la colonne d'a coté) !

Mais j'ai rien trouvé dans ce sens là, et donc oui en effet, juse après mon post je me suis tourné vers l'utilisation d'un template.

De ce style là :

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
24
25
26
27
28
29
Ext.define('module_contracts.view.CategoryShop', 
{
	extend		: 'Ext.view.View',
	alias 		: 'widget.categoryShop',
	id			: 'categoryShop',
	store		: 'ContractLineSubCategories',
 
	tpl :
	[	 	    
	    '<table>',
		    '<tr>',
			    '<tpl for=".">',          
			    	'<td class="thumb-category">{criterion_code}</td>',
			    	'<tpl if="cut == true">',            
	                '</tr><tr>',
	                '</tpl>',
		        '</tpl>',
		   '</tr>',
	    '</table>'
	],
 
	itemId			: 'thumb-category',
    itemSelector	: 'td.thumb-category',
    overItemCls		: 'x-item-over',
    cls				: 'x-image-view',
    height			: 310,
    trackOver		: true,
    multiSelect		: true
});

NB : Pour revenir sur ta réponse, en effet comme on peut le voir ci-dessus, c'est bien un DataView qu'il faut utiliser.

Et justement, sur ce point là, j'ai une autre petite question : au lieu d'"étendre" du composant View, ne serait-il pas possible "d'étendre" du composant Grid afin que notre template utilise le "style" d'une grid (click sur les cellules, couleurs des cellules alernées, ...).

Merci

[sekaijin]

le grid est vraiment fait pour afficher un tableau de données ayant structurellement parlant des lignes est des colonnes.

or faire passer les données d'une colonne dans une autre est un problème de présentation pas une notion de structure.

tu peux si tu veux surcharger un datastore en changeant sa méthode read et son modèle pour avoir un tableau qui au niveau data corresponde à ton besoin. c'est a dire déverser remplir les colonnes d'une ligne avec les données lues avant de passer à la suivante. en gros ton read passerais de

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
[
[1],
[2],
[3],
[4],
[5],
[6],
[7],
[8],
[9],
[10],
[11],
[12]]

à

Code :

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

1
2
3
4
5
[
[1,2,3],
[4,5,6],
[7,8,9],
[10,11,12]]

ainsi ta grid affichera les données comme tu l’entends. mais si tu fais ça il te faut savoir que ExtJS considère que le niveau le plus fin est la ligne. donc si tu mets à jour une cellule c'est toute la ligne qui sera envoyé au serveur.

A+JYT

[nikko49]

Merci pour tes réponses (c'est toi qui répond à la plupart de mes posts )

Finalement j'ai abandonné le fait d'afficher ces infos comme dans un annuaire téléphonique (plus trop le temps de chercher).
Du coup, j'utilise un DataView, et j'affiche mes données de gauche à droite et de haut en bas (contrairement à ce que he voulais initialement faire : de haut en bas et de gauche à droite).

ca donne 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
Ext.define('module_contracts.view.CategoryShop', 
{
	extend		: 'Ext.view.View',
	alias 		: 'widget.categoryShop',
	id			: 'categoryShop',
	store		: 'ContractLineSubCategories',
 
	tpl :
	[	    
	    '<tpl for=".">',
	    '<div class="thumb-category"><input onClick="jQuery(this).prop(\'checked\', this.checked)" type="checkbox" id="subCategory_{criterion_id}">{criterion_code}</div>',
	    '</tpl>'
 
	],
 
	itemId			: 'thumb-category',
    trackOver		: true
});

PS : J'ai essayé au préalable de transposer mes données (de créer une matrice pour inverser mes lignes et mes colonnes). ça fonctionne, mais visuellement il faut retravailler un peu le template et surtout la tansposition prend pas mal de temps et on obtient un petit temps de chargement (c'est pas terrible).

[sekaijin]

J'ai abordé ce sujet il y a quelque temps déjà
http://www.developpez.net/forums/d12...ment-elements/

attention ça date il faut peut être voire la compatibilité avec les version plus récentes de ExtJS

A+JYT