Utilisation d'une grille éditable => Retour côté serveur ?

**Cybero** · 09/03/2011, 15h04

Bonjour,

je me sers depuis peu d'extjs et j'essaie d'utiliser la grille éditable EditorGridPanel
Celle-ci me permet d'afficher des données provenant d'un composant JAVA qui renvoi un flux JSON permettant d'alimenter la grille.

Jusque là pas (trop

) de soucis...

J'ai également créé un bouton permettant le retour des données vers le serveur mais là... je bloque...
Je ne sais pas comment récupérer toutes les données de ma grille

Je pensais trouver facilement comment créer un flux JSON pour le retour à partir de ma grille mais non...

Quelqu'un pourrait m'aider svp ?

Voici mon code js:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Ext.onReady(function(){
 
	Ext.QuickTips.init();
 
	// shorthand alias
    var fm = Ext.form;
 
    // the column model has information about grid columns
    // dataIndex maps the column to the specific data field in
    // the data store (created below)
 
    var cm = new Ext.grid.ColumnModel({
        // specify any defaults for each column
        defaults: {
            sortable: true,
            menuDisabled: true
            },
        columns: [{
            id: 'DateOuverture',
            header: "Date d\'ouverture",
            dataIndex: 'DateOuverture',
            width: 120,
            renderer: Ext.util.Format.dateRenderer('d-m-Y'),
            editor: new fm.DateField({
                format: 'd-m-Y',
                allowBlank: false, blankText:'Ce champ est obligatoire'})
        },{
        	id: 'HeureOuverture',
            header: "Heure d\'ouverture",
            dataIndex: 'HeureOuverture',
            width: 120,
            editor: new fm.TimeField({
                format: 'H:i',
                allowBlank: false, blankText:'Ce champ est obligatoire'})
        },{
        	id: 'HeureFermeture',
            header: "Heure de fermeture",
            dataIndex: 'HeureFermeture',
            width: 120,
            editor: new fm.TimeField({
                format: 'H:i',
                allowBlank: false, blankText:'Ce champ est obligatoire'})
        },{
        	id: 'Commentaire',
            header: "Commentaire",
            dataIndex: 'Commentaire',
            width: 400,
            editor: new fm.TextField()
 
        }]
    });
 
    var proxy=new Ext.data.HttpProxy(    {url:'readDataCalendrierTP.do'});
    var reader=new Ext.data.JsonReader(
    		{
    		},[
    		   	{name: "DateOuverture", type: 'date', dateFormat: 'Y-m-d'},
    		   	{name: "HeureOuverture"}, //, type: 'date', dateFormat: 'H:i'},
    		   	{name: "HeureFermeture"}, //, type: 'date', dateFormat: 'H:i'},
    		   	{name: "Commentaire"}
    		   	]
    		)
 
	  var store=new Ext.data.Store(    {
		  	proxy:proxy,
		  	reader:reader,
		  	sortInfo: {field:'DateOuverture', direction:'ASC'}
	  });
 
	  store.load();
 
    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'grid-calendrierTP',
        width: 800,
        height: 300,
        enableColumnMove: false,  					// turn off column reorder drag drop
        enableColumnResize: false,  				// turn off column resize for whole grid
        autoExpandColumn: 'Commentaire', 			// column with this id will be expanded
//        title: 'Calendrier des ouvertures TP',
//        frame: true,								// ???
        clicksToEdit: 2,
        tbar: [{
            text: 'Ajouter une donn&eacute;e',
            handler : function(){
                // access the Record constructor through the grid's store
                var CalTP = grid.getStore().recordType;
                var p = new CalTP({
                	DateOuverture: '',
                	HeureOuverture: '',
                	HeureFermeture: '',
                	Commentaire: ''
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.startEditing(0, 0);
            }
        }],
        buttons: [{
            text: 'Mettre &agrave; jour',
            handler: function() {
        		// ??????
            }
        }]
 
    });
});

Le bouton devant faire l'action étant celui tout en bas...

Merci d'avance !

**abraxis** · 09/03/2011, 17h58

Bonsoir,

Je pense qu'ici tu trouvera ton bonheur ^^

http://dev.sencha.com/deploy/dev/exa...ow-editor.html

**Cybero** · 10/03/2011, 07h59

Bonjour et merci pour le lien

Effectivement celui-ci m'aide sur la construction du json de retour.

Par contre je ne vois pas comment peut-être envoyé, et à quel moment ce flux.

Moi par exemple, j'aimerais l'envoyer à une action côté serveur en paramètre lors d'un clic sur mon bouton submit

**abraxis** · 14/03/2011, 09h16

A ton bouton tu peu lui rajouter ca:

Code :

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

1
2
3
4
5
6
7
8
handler: {
	mon-store.load({
		params: {
			task: 'premier parametre',
			// La suite des paramètres à envoyer
		}
	});
}

Cela te permet lors de l'action sur le bouton d'appeler un store avec des paramètres.

**Cybero** · 14/03/2011, 13h37

en fait j'ai un peu avancer dans mon coin et je suis arrivé au javascript suivant qui fonctionne si ça peut aider:

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
Ext.onReady(function(){
 
	Ext.QuickTips.init();
 
	// shorthand alias
    var fm = Ext.form;
 
    var proxy=new Ext.data.HttpProxy({
   	    api: {
    	    read    : 'readDataCalendrierTP.do',
        	create  : 'createDataCalendrierTP.do',
        	update  : 'updateDataCalendrierTP.do',
            destroy : 'destroyDataCalendrierTP.do'
    	}
    });
 
    var writer = new Ext.data.JsonWriter({
        encode: true,
        writeAllFields: false
    });
 
    var reader=new Ext.data.JsonReader({
    	idProperty: 'Id',
//    	successProperty: 'success',
//    	messageProperty: 'message',
    	root: 'Lignes'
    },
    	[
		   	{name: "DateOuverture", type: 'date', dateFormat: 'Y-m-d'},
		   	{name: "HeureOuverture"},
		   	{name: "HeureFermeture"},
		   	{name: "Commentaire"}
	   	]);
 
	var store=new Ext.data.Store({
		proxy: proxy,
		reader: reader,
		writer: writer,
		autoSave: false,
		autoDestroy: true,
		sortInfo: {field:'DateOuverture', direction:'ASC'}
	});
 
	store.load();
 
    // create the editor grid
    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        //cm: cm,
	    columns: [
	        {
	        	id: 'DateOuverture',
	        	header: "Date Ouverture",
	        	width: 100,
	        	sortable: true,
	        	dataIndex: 'DateOuverture',
	        	renderer: Ext.util.Format.dateRenderer('d/m/Y'),
	        	editor: new Ext.form.DateField ({
  		    		format: 'd/m/Y',
  	                allowBlank: false, blankText:'Ce champ est obligatoire'
  		    	})
  		    },{
	        	id: 'HeureOuverture',
  		    	header: "Heure Ouverture",
  		    	width: 100,
  		    	sortable: true,
  		    	dataIndex: 'HeureOuverture',
  		    	editor: {
  		    		xtype: 'textfield',
  	                allowBlank: false, blankText:'Ce champ est obligatoire'
  		    	}
  		    },{
	        	id: 'HeureFermeture',
  		    	header: "Heure Fermeture",
  		        width: 100,
  		        sortable: true,
  		        dataIndex: 'HeureFermeture',
  		        editor: {
  		             xtype: 'textfield',
  	                 allowBlank: false, blankText:'Ce champ est obligatoire'
  		        }
  		    },{
	        	id: 'Commentaire',
  		    	header: "Commentaire",
  		        width: 100,
  		        sortable: true,
  		        dataIndex: 'Commentaire',
  		        editor: {
  		             xtype: 'textfield',
  		             allowBlank: true
  		        }
  		    }
  	    ],
  	    selModel: new Ext.grid.RowSelectionModel({
  			singleSelect: false
  		}),
        renderTo: 'grid-calendrierTP',
        width: 800,
        height: 300,
        autoExpandColumn: 'Commentaire',
        //title: 'Calendrier des ouvertures TP',
        clicksToEdit: 2,
        buttons: [{
            text: 'Ajouter',
            handler: function() {
                // access the Record constructor through the grid's store
                var CalTP = grid.getStore().recordType;
                var p = new CalTP({
                	DateOuverture: '',
                	HeureOuverture: '07:30',
                	HeureFermeture: '18:30',
                	Commentaire: ''
                });
                grid.stopEditing();
                store.insert(0, p);
                grid.getView().refresh();
                grid.getSelectionModel().selectRow(0);
                grid.startEditing(0, 0);
        	}
        },{
	        text: 'Supprimer',
	        handler: function() {
	    		grid.stopEditing();
	    		var s = grid.getSelectionModel().getSelections();
	    		for(var i = 0, r; r = s[i]; i++){
	    			store.remove(r);
	    		}
	    		store.save();
	    		grid.getView().refresh();
	    		grid.startEditing(0, 0);
	    	}
	    },{
	        text: 'Enregistrer',
	        handler: function() {
	    		store.save();
	        }
	    }]
    });
});

Utilisation d'une grille éditable => Retour côté serveur ?

Ext JS / Sencha

Vue hybride

Discussions similaires

Partager

Partager