EditorGridPanel - Contrôles avant validation

[Cybero]

Bonjour,

j'ai un peu avancé dans mon projet web à base d'extjs
J'arrive à afficher les données issues d'un serveur JAVA et à interagir avec lui lors la suppression, mise à jour, ajout de lignes.

Voici ce que donne mon écran:



Maintenant j'aimerais mettre des contrôles avant validation et envoi des données vers le serveurs java
Les voici détaillés:

Tout d'abord, j'aimerais ne pouvoir valider ma grille que lorsque tous les champs en "AllowBlank: false" sont renseignés

J'ai une colonne Date qui ne doit pas contenir plus d'une fois un jour donné, donc comment empêcher les doublons sur ce champ ?

Et enfin, j'aimerai contrôler que le format des heures soit tout le temps de la forme HH:mm

Chacun de ces contrôles doit se faire au moment où je clique sur "Enregistrer", avant le store.save() (qui envoi vers l'action java) et envoyer un message d'erreur si erreur il y a...

Et enfin le code source... les boutons sont en bas

Code :

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
140
141
Ext.onReady(function(){
 
	Ext.QuickTips.init();
 
    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,
//        listeners:{
//           afteredit: function(e){
//              alert(e.field);
//             }
//    	},
 
	    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();
	        }
	    }]
    });
});