Ext gridPanel avec complexe data

Version imprimable

Bonjour,
malheureusement je peux pas poster mon code ici la société m'impose de ne pas donner un code ni imprime écran mais je vais expliquer mon problème avec un exemple similaire:
Bon le but de moi est je dois récupérer un json comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 { "data": { "CompetenceName": "abc", "type": "xyz", "resourcesLevels": [ { "currentLevel": "0", "targetLevel": "1" }, { "currentLevel": "1", "targetLevel": "2" } ] } }
ici dans mon cas le nombre de resources levels est variable donc chaque compétence has many ressources Levels, bon je dois afficher dans une grid et dans chaque ligne de cette dernier le nom du compétence, le type ,et dans la méme ligne tous les resources (current,target), donc j'ai une grid avec ses colonnes :
competenceName,type, oups dans ce cas je dois connaitre le nombre de resources Level pour compléter les autres colonnes donc je dois construire une grid dynamiquement, supposant on a 2 resourcesLevel don les colonnes de la grid seront :
competenceName,type,resourcelevel(son nom:le nom de la resource exp :M,XX et avec deux sous colonnes current level,target level),resourcelevel(son nom:le nom de la resource exp :M,YY et avec deux sous colonnes current level,target level), mon probléme ici si dans chaque colonne currentLevel,targetLevel de chaque resource je dois préciser une dataIndex pour chacun pour currentLevel(dataIndex:'currentLevel') et targetLevel(dataIndex:'targetLevel') là il me dit qu'il y a un conflit de noms j'ai compris le problème c'est à dire il y a beaucoup de currentLevel et targetLevel pour une ligne de grid mais je sais pas comment je peux trouver une solution ou une idée pour ça .
Merci.

22/03/2014, 16h25
sekaijin

je croix qu'il va te falloir être plus clair car je n'ai absolument rien compris.

tu fais un tree-grid ?
A+JYT
22/03/2014, 22h22
fahdijbeli

Salut,
merci l'ami pour la réponse, voila j'ai fait l'exemple ici http://jsfiddle.net/D5UsU/ est la je veux que chaque current et target associé au store, moi dans mon truc j'ai fait le renderer mais les deux sous colonne (current et target) ne sont pas lié au store donc il n y a pas de dataIndex car si je modifie la valeur de current ou target dans le grid l’événement update du store ne se déclenche pas donc mon problème au lieu de renderer comment je peux associer le current et target de chaque ressource dans mon store alorque j'ai fait dataIndex sur current et target mais n'affiche rien.
Merci.

Je ne suis pas sur d'avoir compris.

ce que tu veux faire c'est une double jointure de tes données personne et resource ?
A+JYT

le grid est défini pour afficher un seul store. le groupedhead et fait pour grouper des colonne s'un même datastrore.

le modèle maitre détail et conçu pour être utilisé avec plusieurs composants on pour afficher maitre l'autre détail.
que ce soit des forms ou des grids.

Extjs n'est pas fait pour croiser des données.
je pense que tu dois crée un datastore qui contient toutes les colonnes que tu veux afficher.
pour le remplir tu fais une jointure dans ta base.

sinon le render semble être la bonne approche mais je n'ai jamais testé.
dans les forum on trouve cette réponse
Code:

1 2 3 4 5 6 7 8 9 10 { text: "orderDescription", renderer: function(value,meta,record){//1. //var orderStore = record.orderStore;//2a. //var orderList = ordersStore.data.items;//2b. var orderList = record.orders().data.items; //3.This line is the same as 2 the lines above(2a,2b). var order = orderList[0]; //4. TODO..loop through your list. var description = order.data.description; //5. return description ; },
pour les stores
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Ext.define('AM.model.User', { extend: 'Ext.data.Model', fields: ['id', 'username', 'firstName', 'lastName', 'state', 'city'], associations: [ { type: 'hasMany', model: 'Order', name: 'orders' },], }); Ext.define('AM.model.Order', { extend: 'Ext.data.Model', fields: ['id', 'userId', 'date', 'description', 'value'], belongsTo: 'User', });
A+JYT

merci d'abord pour le soutient, moi j'ai une autre idée voila ce que je veux faire:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
                    text: "current",
                    id:'currentId',
                    renderer:function (value, metaData, record, rowIdx, colIndex ){
                        return record.data.Resource[(colIndex-6)/2].current;
                    },
                    editor:{
                        xtype:'numberfield',
                        listeners:{
                            change:{
                                fn:function(me, newValue, oldValue, eOpts){
                                   //voila là je veux récuperer le record du store ou se  trouve le 'numberfield' pour que je puisse modifier l'élement current du store c'est comme je vais faire un dataIndex pour le colonne current.
                                }
                            }
                        }
                    }
                }

là ou j'ai fait le commentaire si je peux récupérer le record du store il va résoudre mon problème, si c'est impossible est ce que y a t il un moyen de faire passer le record dans la colonne au son éditeur car je peux récupérer le record dans le renderer du colonne ?

Merci

23/03/2014, 14h34
sekaijin

Code:

var form = this.up('form').getForm();

te retourne le formulaire
la méthode getFields te retourne la liste des champs du formulaire
il ne te reste qu'à modifier le champs de ton choix.

lorsque le formulaire sera enregistré dans ton datastore tous les composants qui affichent un ou des élément du store seront rafraichis.

A+JYT

merci l'ami avec ta méthode j'ai pu récupérer le record mais il me reste le dernière problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 {
                    text: "current",
                    id:'currentId',
                    renderer:function (value, metaData, record, rowIdx, colIndex ){
 
                        //console.log(this.column.down('numberfield'));
                        return record.data.Resource[(colIndex-6)/2].current;
                    },
                    editor:{
                        xtype:'numberfield',
                        listeners:{
                            change:{
                                fn:function(me, newValue, oldValue, eOpts){
                                    var form = this.up('form').getForm();
 
                                    form._record.data.Resource[colIdx].current=newValue;
 
                                }
                            }
                        }
                    }
                }

là dans la fonction déclencher par l’événement change j'ai fait

Code:

form._record.data.Resource[colIdx].current=newValue;

le colIdx je peux pas le récupérer du colonne ou se trouve le 'numberfield' est ce que y a t il un moyenne pour le récupérer ? ou bien de passer le newValue au événement 'edit' du mon grid panel car cet événement j'ai pu de déterminer la colIdx ou a été fait la modification.

Merci infiniment.

23/03/2014, 17h44
sekaijin

attention le _record me semble étrange il doit y avoir un getRecord

pour ce qui est de l'index il s'agit du même que celui que tu as mis dans le render

je pense que la variable me ou this doit contenir une référence au champ du formulaire et donc à la colonne
je ne sais pas trop comment mais je pense qu'en inspectant ces variable tu doit trover un moyen de remonter à la colonne et donc à l'index.

le rowEditor garde quelque par la relation entre la colonne et le champ. mais je ne sais pas trop où il faut chercher.

inspecte aussi la variable eOpts il s'agit des options de l'événement et je ne sais pas dans ce contexte ce que tu reçois.

A+JYT
23/03/2014, 18h26
fahdijbeli

Citation:

Envoyé par sekaijin

pour ce qui est de l'index il s'agit du même que celui que tu as mis dans le render

je pense que la variable me ou this doit contenir une référence au champ du formulaire et donc à la colonne
je ne sais pas trop comment mais je pense qu'en inspectant ces variable tu doit trouver un moyen de remonter à la colonne et donc à l'index.

le rowEditor garde quelque par la relation entre la colonne et le champ. mais je ne sais pas trop où il faut chercher.

inspecte aussi la variable eOpts il s'agit des options de l'événement et je ne sais pas dans ce contexte ce que tu reçois.

A+JYT

exactement c'est ça mon problème j'ai pas trouvé un moyen de remonter à la colonne donc à l'index :?.
23/03/2014, 22h17
fahdijbeli

1 pièce(s) jointe(s)

voila j'ai trouvé la colonne dans la console mais je sais pas comment le sélectionner en utilisant les selectors (query) de ExtJS, j'ai fait une imprime écran :
voire la pièce jointe.
donc je veux récupérer le <td> marquer en rouge dans l'image.

Merci.

Re, j'ai trouvé un truc :) et ça marche: voila j'ai ajouté un attribut sub cloumn au configuration de l'éditor :

Code:

1
2
3
4
5
6
7
8
9
10
editor: {
    xtype: 'numberfield',
    subcolumn: 1,
    listeners: {
        change: function (me, newValue, oldValue, eOpts) {
            var form = this.up('form').getForm();
               this.subcolumn //on récupere l'index de la colonne 
        }
    }
}

et merci beaucoup sekaijin.

Merci.

24/03/2014, 21h03
sekaijin

de rien je n'aurais su te donner le nom du membre.
Merci à toi de partager la solution.
A+JYT