Extjs 4 ajouter une ligne dans un grid panel

Version imprimable

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:

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

13/01/2012, 10h34
kenny.kev

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.

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:

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

16/01/2012, 12h06
kenny.kev

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.
16/01/2012, 15h39
MadMax4

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

Cordialement
28/06/2012, 15h52
fahdijbeli

2 pièce(s) jointe(s)

bonjour,
j ai fait un petit exemple sur extjs pour afficher un panel grid mais si je tape l'url de mon exemple n'affiche rien alors que jai telechargé le sdk de extjs pui j'ai extré le zip vers mon repertoire(application) voici mon fichier app.js
et mon fichier index.html
28/06/2012, 16h21
abraxis

Citation:

Envoyé par fahdiraed

bonjour,
j ai fait un petit exemple sur extjs pour afficher un panel grid mais si je tape l'url de mon exemple n'affiche rien alors que jai telechargé le sdk de extjs pui j'ai extré le zip vers mon repertoire(application) voici mon fichier app.js
et mon fichier index.html

Bonjour,

Je pense que le mieux serait que tu ajoute une nouvelle discussion plutôt que d'en utiliser une déjà résolue sans quoi tu n'aura pas de réponse.