Discussion :

[Tiolebucheron]

bonjour

Je cherche à mettre une image dans un grid et déclencher un évènement à partir du clic.

J'ai essayé d'utiliser l'additif RowActions voir ici .
Je rencontre des difficultés. J'ai l'erreur suivante

c.render is not a function
http://localhost/mapfish-client/ext/ext-all-debug.js
Line 14132

Pouvez-vous me dire ce qu'il ne va pas!! Il y a peut être une autre solution plus simple.


Merci de votre aide.
Tio

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
	// shared reader
	var reader = new Ext.data.ArrayReader({}, [
		{name: 'Prop_Lib'},
		{name: 'Commune_Code'},
		{name: 'SectionPlan'},
		{name: 'NumeroPlan'},
		{name: 'Surface'},
		{name: 'Libelle'}
	]);
 
	// Array data for the grids
	Ext.grid.dummyData = [['Dupont','76360','Z','0001','15,00','Taillis']];
 
	var grid_Pro = new Ext.ux.grid.RowActions({
 
	    initComponent:function() {
 
	 	// Create RowActions Plugin
	 	this.action = new Ext.ux.grid.RowActions({
			 header:'Actions'
			,actions:[{
				 iconIndex:'action1'
				,qtipIndex:'qtip1'
				,iconCls:'icon-open'
				,tooltip:'Open'
			}]
			,callbacks:{
				'icon-plus':function(grid, record, action, row, col) {
					Ext.ux.Toast.msg('Callback: icon-plus', 'You have clicked row: <b>{0}</b>, action: <b>{0}</b>', row, action);
				}
			}
		});
 
		// dummy action event handler - just outputs some arguments to console
		this.action.on({
			action:function(grid, record, action, row, col) {
				Ext.ux.Toast.msg('Event: action', 'You have clicked row: <b>{0}</b>, action: <b>{1}</b>', row, action);
			}
			,beforeaction:function() {
				Ext.ux.Toast.msg('Event: beforeaction', 'You can cancel the action by returning false from this event handler.');
			}
		});
 
		// configure the grid
		Ext.apply(this, {
			store:new Ext.data.GroupingStore({
				reader: reader,
				data: Ext.grid.dummyData,
				sortInfo:{field: 'Prop_Lib', direction: "ASC"},
				groupField:'Prop_Lib'
			}),
			columns: [
				{header: "Nom", width: 80, sortable: true, dataIndex: 'Prop_Lib'},
				{header: "Commune", width: 40, sortable: true, dataIndex: 'Commune_Code'},
				{header: "Section", width: 20, sortable: true, dataIndex: 'SectionPlan'},
				{header: "Numero", width: 20, sortable: true, dataIndex: 'NumeroPlan'},
				{header: "Surface", width: 20, sortable: true, dataIndex: 'Surface'},
				{header: "Type", width: 40, sortable: true, dataIndex: 'Libelle'},
				this.action
			],
			plugins:[this.action],
			view: new Ext.grid.GroupingView({
				autoFill: true,
				forceFit:true,
				groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Parcelles" : "Item"]})'
			}),
		}); // eo apply
 
		// add paging toolbar
		this.bbar = new Ext.PagingToolbar({
			 store:this.store
			,displayInfo:true
			,pageSize:10
		});
 
		// call parent
		Example.Grid.superclass.initComponent.apply(this, arguments);
		} // eo function initComponent
	    ,onRender:function() {
 
		// call parent
		Example.Grid.superclass.onRender.apply(this, arguments);
 
		// load the store
		this.store.load({params:{start:0, limit:10}});
 
	} // eo function onRender
	// }}}
 
}); // eo extend
 
	var pan_CadCenter = new Ext.Panel({
		region: 'center',
		items:[grid_Pro]
	});

[bigben89]

Je connais pas vraiment les rowActions, mais au vu des exemples fournis, je dirais que tu t'es trompé d'objet pour grid_Pro. Au vu du nom, je présume que c'est un GridPanel, et non pas un RowActions.

Code :

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

1
2
3
var grid_Pro = new Ext.grid.GridPanel({
    // ...
});

[Tiolebucheron]

Bonjour

A l'origine je suis partit d'un GridPanel. J'arrivai a géré une action sans problème. Mais je n'arrivais pas à mettre une image dans une colonne que je pourrais, par la suite, actualiser.
J'ai donc essayé de regarder les exemples où il y a avait des images dans les colonnes des Grid. Et la je suis tombé sur Row Action.

Il est peut être plus simple de mettre une image dans une colonne d'un Grid Panel. Connais tu ce genre de code??

Merci de ton aide

[bigben89]

Si c'est juste afficher une simple image dans chaque cellule d'une colonne, c'est certainement plus simple de jouer avec les renderer des colonnes et de personnaliser le contenu html des cellules :

Code :

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

1
2
3
4
5
6
7
8
9
10
columns: [
    {
        header: 'Image',
        dataIndex: 'NomImage',
        renderer: function(value, metadata, record){
            return '<img src="/repertoiresImages/'+value+'" alt="'+value+'" title="Image de l\'élément '+record.get('Nom')+'" />';
        }
    },
    // ...
]

[Tiolebucheron]

Merci pour cette réponse en effet c'est plus simple.

par contre j'ai encore une difficulté et une question. DSL pour le dérangement.

Pouir l'instant dans la colonne cela m'affiche "indefined". voici la ligne.

{header: "Carto",dataIndex: 'cross.gif',renderer: function(value, metadata, record){ return '<img src="../img/tree/'+value+'" alt="'+value+'" title="En attente ...'+record.get('Nom')+'" />';}}

Je pense qu'il s'agit d'un soucis avec le contenu de cette variable non prévu dans le Ext.data.ArrayReader???
Est ce que je me trompe!!

La question peut-on faire contenir une valeur dans cette colonne du genre 0-1-X un genre de booléen? sans toutefois le rajouter dans le Ext.data.ArrayReader. La finalité est qu'une fois les diverse selection des lignes faite, je lanceraai en revu le grid pour récupérer certaines valeur des lignes valide.

Je ne sais si je suis assez clair?.

Merci par avance.
Tio

[bigben89]

Je ne suis pas sûr d'avoir tout compris, mais en gros, tu voudrais une image en fonction de la valeur de la colonne, c'est ça ?
Pour telle valeur, tu veux mettre telle image, pour telle autre, une autre image ?

Moi, pour indiquer si mes éléments sont en ligne ou pas, j'affiche une image correspondant au statut :

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
{
    header: 'En ligne',
    dataIndex: 'EnLigne',
    renderer: function(value){
        if( value == 1 ){
            var image = 'EnLigne.png';
            var title = 'En ligne';
        }else{
            var image = 'HorsLigne.png';
            var title = 'Hors ligne';
        }
 
        return '<img src="/images/'+image+'" alt="'+title+'" title="'+title+'" />';
    }
}

En espérant que ça puisse t'aider.