Bonjour,

Je travaille actuellement sur la migration en Ext JS 4.0.7 d'une application développée en Ext JS 3.x.

J'essaie de construire un TreePanel à partir d'un flux XML que je ne peux pas modifier car utilisé dans d'autre version de l'application.

La structure est la suivante :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<root>
  <dossier text="un dossier">
    <document text="un premier document" />
    <document text="un second document" />
    <dossier text="sous dossier">
        <document text="document dusous dossier" />
    </dossier>
  </dossier>
  <document code="string" text="document a la racine" />
</root>
Et je cherche à avoir un TreePanel qui ressemble à ça :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
un dossier
.....un premier document
.....un second document
.....sous dossier
..........document du sous dossier
document a la racine
Pour se faire, j'ai créé mes modèles de données (je n'ai pas mis tout les champs dans la structure du XML au dessus pour plus de clarté, seul le champ "text" est important pour le moment) :
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
 
    Ext.define('document', {
	    extend: 'Ext.data.Model',
	    belongsTo: 'dossier',
	    fields: [
	        {name: 'text', type: 'string'},
	        {name: 'code', type: 'string'},
	        {name: 'multidest', type: 'boolean'},
	        {name: 'mailservice', type: 'boolean'},
	        {name: 'cdmailservice', type: 'boolean'},
	        {name: 'archiveservice', type: 'boolean'},
	        {name: 'prod', type: 'boolean'}
	    ]
    });
 
    Ext.define('dossier', {
	    extend: 'Ext.data.Model',
            belongsTo: 'Tab',
	    hasMany: [
	        {model: 'document', name: 'documents'},
	        {model: 'dossier', name: 'dossiers'}
        ],
	    fields: [
	        {name: 'text', type: 'string'},
	        {name: 'code', type: 'string'}
	    ]
    });
 
    Ext.define('Tab', {
        extend: 'Ext.data.Model',
        hasMany: {model: 'Dossier', name: 'dossiers'},
        fields: [
            {name: 'code', type: 'string'}
        ]
    });
Je créé ensuite mon TreeStore qui va aller récupérer les données issues du XML :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
var store = Ext.create('Ext.data.TreeStore', {
        model: 'Tab',
        proxy: {
            type: 'ajax',
            url: url,
            reader: {
                type: 'xml'
            }
        }
    });
Et ensuite vient mon TreePanel :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
var treepanel = Ext.create('Ext.tree.Panel', {
    store: store
});
Mais après je suis bloqué. Forcement, rien ne s'affiche puisque la structure XML attendue est une liste de "node" comme on peut le voir dans l'exemple de Sencha.

Je ne comprend pas comment faire pour que mon flux soit interprété de cette manière. Il doit me manquer une brique mais j'ai beau chercher, je n'ai rien trouvé.
Sur la version 3.x de l'application, c'est le reader (XmlTreeLoader) qui s'occupe de gérer ça avec une fonction qui attribue à chaque noeud de mon XML toutes les propriétés que le TreePanel comprend.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
if (attr.tagName == 'dossier'){
				attr.qtip = attr.text;
				attr.leaf = false;
				attr.expanded = true;
				attr.loaded = true;
				attr.id = attr.code;
			}
Est-ce que quelqu'un à déjà construit un TreePanel de cette manière et pourrai m'éclairer ?

D'avance, merci pour votre aide