Extjs 4 ajouter une ligne dans un grid panel [Résolu]

MadMax4 · 12/01/2012, 11h01

Bonjour,

Version EXT JS : 4.0.7

Dans mon programme :
- je charge un tableau à partir d'une requete ajax
- je crée un jsonstore dans lequel je mets les données du tableau en tant que records
- je crée mon gridpanel où j'assigne le jsonstore comme Store.
puis,

- j'affiche un formulaire où un utilisateur peut créer de nouveaux objets appelés PRT :

voici mon code :

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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
 
var myData;
function Saisie_PRT()
{
	Ext.onReady(function(){
 
    Ext.QuickTips.init();
 
	var data_etat = new Ext.data.SimpleStore({
		fields: ['code_E','lib_E'],
		data: [["1","Abandonné"],["2","Clos"],["3","En cours"],["4","Demandé"],["5","Refusé"], ["6","Suspendu"], ["7","Initialisation"], ["8","Supprimé"]] });
	var data_typo = new Ext.data.SimpleStore({
		fields: ['code_T','lib_T'],
		data: [["1","Maintenance"],["2","Projets Autres"],["3","Projets Plan"],["4","Récurrent"],["5","Etudes"],["6","Sujets Prévisionnels"]] });
 
		Ext.Ajax.request({
			url: 'Ajax_List_prt.php',
			method:"POST",
			async:false,
			success: function(result) {
				myData = {records : Ext.JSON.decode(result.responseText) }},
			failure: function (result) { 
				Ext.MessageBox.alert('Problème de récupération des prt', result.responseText) }
												});
 
	var ds = Ext.create('Ext.data.JsonStore', {
	fields: [{name: 'Code_PRT', mapping : 'Code_PRT'},
		{name: 'Libelle_PRT', mapping : 'Libelle_PRT'},
		{name: 'Libelle_etat', mapping : 'Libelle_etat'},
		{name: 'Libelle_typo', mapping : 'Libelle_typo'}
						],
	data   : myData.records
					});
 
   	var gridForm = Ext.create('Ext.form.Panel', {
        id: 'prt',
        frame: true,
        title: 'Projets',
        bodyPadding: 5,
        width: 1070,
        layout: 'column',  
        fieldDefaults: {
            labelAlign: 'left',
            msgTarget: 'side'
        },
 
        items: [{
            columnWidth: 0.56, xtype: 'gridpanel',
	    id:'gp_prt',
            store: ds,
            height: 300,
            title:'Liste des PRT',
            columns: [
                { id : 'Code_PRT', header: "Code PRT", width: 72, sortable: true, dataIndex: 'Code_PRT'},
		{header: "Nom PRT", width: 310, sortable: true, dataIndex: 'Libelle_PRT'},
		{header: "Etat PRT", width: 78, sortable: true, dataIndex: 'Libelle_etat'},
	{header: "Typologie", width: 109, sortable: true, dataIndex: 'Libelle_typo'}
            ],
 
            listeners: {
                selectionchange: function(model, records) {
                    if (records[0]) {
						Ext.getCmp('Code').setValue(records[0].data[0]);
 
	Ext.getCmp('Mo').enable();
	Ext.getCmp('Raz').enable();
	Ext.getCmp('Cr').disable()
                    }
                }
            }
        }, {
            columnWidth: 0.44,
            margin: '0 0 0 10',
            xtype: 'fieldset',
            title:'Créer, Modifier un PRT',
            defaults: {
                width: 430,
                labelWidth: 60
            },
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Code', id:'Code', maskRe: /[A-Z0-9]/,
				maxLength:4, 
				validator : function(value){
				var prt_expr = new RegExp(/[A-Z][A-Z0-9]{3}$/);
				Ok = prt_expr.test(value);
				if (Ok ) {Ext.getCmp('Cr').enable()}
				else {Ext.getCmp('Cr').disable()};
				return Ok 
    								}
            },{
                fieldLabel: 'Libellé', id:'Lib', name: 'Libellé',
				maskRe: /[A-Z0-9 -.:*//]/,
				maxLength:50
            },{
				xtype: 'combo', fieldLabel: 'Etat',
				id:'Etat', name: 'Etat',
				hiddenName: 'Etat', store: data_etat,
				displayField: 'lib_E', valueField: 'code_E',
				selectOnFocus: true, mode: 'local',
				typeAhead: true, editable: true,
				triggerAction: 'all', value : ''
			},{
				xtype: 'combo',
                fieldLabel: 'Typologie', id:'typo',
                name: 'typo', store: data_typo,
		displayField: 'lib_T', valueField: 'code_T',
		selectOnFocus: true, mode: 'local',
		typeAhead: true, 	editable: true, triggerAction: 'all', value : ''
			}
 
                ]
        }
		],
			buttons: ['->', {
            text: '<b>Créer</b>',
			id:'Cr', disabled : true, handler: function() {
				Ext.Ajax.request({
				url: 'Ajax_crea_prt.php',
				async:false,
				method:"POST",
				success: function(result,request) {
					if (result.responseText == 'OK') {
 
						 // insérer la ligne dans la grille
 
						// insertion dans la nomenclature
						Ext.Ajax.request({
							url: 'Ajax_crea_SQL_prt.php',
							async:false,
							method:"POST",
							success: function(result,request) {if (result.responseText != 'OK') {
	Ext.MessageBox.show( {
		minWidth:200,
		icon: Ext.MessageBox.ERROR,
		msg:'PRT déjà existant dans la nomenclature!',
		buttons: Ext.MessageBox.OK})																							}	},
	failure: function (result, request) { 
								Ext.MessageBox.alert('Problème enregistrement PRT Nomenclature', result.responseText) },
	params: {code:Ext.getCmp('Code').getValue(), 
lib:Ext.getCmp('Lib').getValue(), 
eta:Ext.getCmp('Etat').getValue()}
												})														}
					else
					{
Ext.MessageBox.show( {
	minWidth:200,
        icon: Ext.MessageBox.ERROR,
	msg:'ce code PRT existe déjà !',
	buttons: Ext.MessageBox.OK})
					};
	Ext.getCmp('Raz').enable()													},
failure: function (result, request) { 
Ext.MessageBox.alert('Problème enregistrement PRT', result.responseText); },
params: {	code:Ext.getCmp('Code').getValue(), 						lib:Ext.getCmp('Lib').getValue(), 						eta:Ext.getCmp('Etat').getValue(), 					typ:Ext.getCmp('typo').getValue()}
})
								}
        }, {
text: '<b>Modifier</b>',
disabled : true,
handler: function() {
Ext.MessageBox.alert('Modification du PRT!') },
id:'Mo'
        }, {
text: '<b>R.A.Z</b>',
disabled : true,
id:'Raz',
handler: function() {
	Ext.getCmp('Code').setValue('');
	Ext.getCmp('Lib').setValue('');
	Ext.getCmp('Etat').setValue('');
	Ext.getCmp('typo').setValue('');
	Ext.getCmp('Cr').disable();
	Ext.getCmp('Mo').disable()
        		 }
        }],
  renderTo: document.getElementById('panel')
    })
						 })
}

Tout se passe bien jusqu'à ce que je veuille insérer l'objet créé dans le gridpanel : Comment fait-on en EXT JS 4 ?

merci de m'éclairer

kenny.kev · 13/01/2012, 10h34

Je te conseil vivement de regarder les exemples fournit par sencha car il y a la réponse dedans.

Tout le code est accessible. avec firebug ou le debugger de chrome.

MadMax4 · 16/01/2012, 09h50

Merci Kenny pour la suggestion
En fait, j'ai déjà regardé et fais mon "marché".

j'ai ré-écrit la fonction (voici le code)

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
140
141
142
143
144
145
146
147
 
function Saisie_PRT()
{
Ext.onReady(function(){
 
   Ext.define('prt', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'Code_PRT', type: 'string' },
            { name: 'Libelle_PRT', type: 'string' },
	    { name: 'Libelle_etat', type: 'string' },
            { name: 'Libelle_typo', type: 'string' }
        ]
    });
 
   var data_etat = new Ext.data.SimpleStore({
		fields: ['code_E','lib_E'],
		data: [["1","Abandonné"],["2","Clos"],["3","En cours"],["4","Demandé"],["5","Refusé"], ["6","Suspendu"], ["7","Initialisation"], ["8","Supprimé"]] });
	var data_typo = new Ext.data.SimpleStore({
		fields: ['code_T','lib_T'],
		data: [["1","Maintenance"],["2","Projets Autres"],["3","Projets Plan"],["4","Récurrent"],["5","Etudes"],["6","Sujets Prévisionnels"]] });
 
    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'prt',
        proxy: {
            type: 'ajax',
            url: 'Ajax_List_prt.php',
            reader: {
                type: 'json',
                root: 'records'
            }
        },
        sorters: [{
            property: 'Code_PRT',
            direction:'ASC'
        }]
    });
 
    var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [{
            id: 'code',
	    width: 75,
            header: 'Code PRT',
            dataIndex: 'Code_PRT',
            field: {
                allowBlank: false
            },
			maskRe: /[A-Z0-9]/,
			maxLength:4,
			validator : function(value){
			var prt_expr = new RegExp(/[A-Z][A-Z0-9]{3}$/);
			if (value.length != 4) 
				{Ext.getCmp('Cr').disable() }
			Ok = prt_expr.test(value);
			return Ok 
								}
        }, {
            header: 'Libellé PRT',
            dataIndex: 'Libelle_PRT',
            width: 245,
            field: {
                id:'Lib',
                name: 'Libellé',
				maskRe: /[A-Z0-9 -.:*//]/,
				maxLength:50
            }
        }, {
	    header: 'Libellé Etat',
            dataIndex: 'Libelle_etat',
		width: 180,
		field: {
            xtype: 'combobox', id:'Etat',
                name: 'Etat',
				lazyRender: true,
				hiddenName: 'Etat',
				store: data_etat,
				displayField: 'lib_E',
				valueField: 'code_E',
                selectOnTab: true,
				mode: 'local',
				typeAhead: true,
				editable: true,
				triggerAction: 'all',
				value : '' }
        }, {
		header: 'Libellé Typo',
                dataIndex: 'Libelle_typo',
		width: 180,
		field:{
                xtype: 'combobox',
		id:'typo',
                name: 'typo',
		store: data_typo,
		displayField: 'lib_T',
		valueField: 'code_T',
		selectOnFocus: true,
		mode: 'local',
		typeAhead: true,
		editable: true,
		triggerAction: 'all',
		value : ''}
        }],
        selModel: {
            selType: 'cellmodel'
        },
        renderTo: document.getElementById('panel'),
        width: 750,
        height: 300,
        title: 'Création/modification des PRT',
        frame: true,
        tbar: [{
            text: 'Ajout PRT',
            handler : function(){
                // Create a record instance through the ModelManager
                var r = Ext.ModelManager.create({
                    Code_PRT: 'X000',
                    Libelle_PRT: '',
                    Libelle_etat: 'En cours',	
                    Libelle_typo: ''
                }, 'prt');
                store.insert(0, r);
                cellEditing.startEditByPosition({row: 0, column: 0});
            }
        }],
		        plugins: [cellEditing],
    });
    // manually trigger the data store load
    store.load({
        // store loading is asynchronous, use a load listener or callback to handle results
        callback: function(){
            Ext.Msg.show({
                title: 'Store Load Callback',
                msg: 'Données chargées',
                modal: false,
                icon: Ext.Msg.INFO,
                buttons: Ext.Msg.OK
            });
        }
    });
})
}

mais d'autres problèmes se posent :
il va falloir que je donne la possibilité de sauvegarder dans la base les données modifiées ou créées !
Comment donner cette possibilité à partir de la grid ?
J'ai bien essayé d'ajouter une colonne mais compte tenu de la liaison avec le data model, j'ai une erreur "namespace is undefined" systématique.

Je ne m'en sors pas !
Madmax

kenny.kev · 16/01/2012, 12h06

Voici la réponse comment faire avec un grid : http://dev.sencha.com/deploy/ext-4.0...er/writer.html

Si tu utilise firebug, tu verras qu'une requête est faite au serveur pour enregistrer ta ligne.
Bien entendu il faut que tu l'adapte en fonction du type d'édition mais sinon l'appel est le meme.

MadMax4 · 16/01/2012, 15h39

Merci beaucoup Kenny, c'est exactement ce que je cherchais.
Faut que j'adapte mais globalement ça répond bien à l'objectif.

Cordialement

13/01/2012, 10h34	#2
kenny.kev Membre chevronné Inscription : janvier 2007 Messages : 575 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : France, Indre et Loire (Centre) Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2007 Messages : 575 Points : 690 Points : 690	Je te conseil vivement de regarder les exemples fournit par sencha car il y a la réponse dedans. Tout le code est accessible. avec firebug ou le debugger de chrome.
	00

16/01/2012, 12h06	#4
kenny.kev Membre chevronné Inscription : janvier 2007 Messages : 575 Détails du profil Informations personnelles : Sexe : Âge : 27 Localisation : France, Indre et Loire (Centre) Informations professionnelles : Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : janvier 2007 Messages : 575 Points : 690 Points : 690	Voici la réponse comment faire avec un grid : http://dev.sencha.com/deploy/ext-4.0...er/writer.html Si tu utilise firebug, tu verras qu'une requête est faite au serveur pour enregistrer ta ligne. Bien entendu il faut que tu l'adapte en fonction du type d'édition mais sinon l'appel est le meme.
	00

16/01/2012, 15h39	#5
MadMax4 Membre à l'essai Inscription : juin 2007 Messages : 70 Détails du profil Informations forums : Inscription : juin 2007 Messages : 70 Points : 23 Points : 23	Merci beaucoup Kenny, c'est exactement ce que je cherchais. Faut que j'adapte mais globalement ça répond bien à l'objectif. Cordialement
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email