Comment afficher un Text dans la racine du Tree ?

Version imprimable

Salut à tous,

j'ai un Tree Grid dans lequel j'affiche le JSON suivant:

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
{
	"name" : "root",
	"expanded" : false,
	"leaf" : false,
	"children" : [
		{
			"name" : "Miscellaneous",
			"expanded" : false,
			"leaf" : false,
			"children" : [
				{
					"name" : "Misc Feuille G",
					"expanded" : false,
					"leaf" : true
				},
				{
					"name" : "Misc Feuille D",
					"expanded" : false,
					"leaf" : true
				}
			]
		},
		{
			"name" : "My Projects",
			"expanded" : false,
			"leaf" : false,
			"children" : [
				{
					"name" : "Projet Feuille G",
					"expanded" : false,
					"leaf" : true
				},
				{
					"name" : "Projet Feuille D",
					"expanded" : false,
					"leaf" : true
				},
				{
					"name" : "airbus",
					"expanded" : false,
					"leaf" : false,
					"children" : [
						{
						"name" : "GB3456687 G",
						"expanded" : false,
						"leaf" : true
						},
						{
						"name" : "FR1423564 D",
						"expanded" : false,
						"leaf" : true
						}
					]
				}
			]
		}
	]
}

cela affiche bien ma hierarchie mais le prmier folder PERE (pour pas dire root) n'a pas de text associé.
J'ai donc une hierarchie de ce style:

Code:

1
2
3
4
5
+
  + Miscellaneous
    + ... 
  + My Projects
    + ...

Comment puis-je afficher pour le premier + (le premier folder) un text ?!

ça me rend fou car je cherche depuis plusieurs jours (par intermittence quand même) sans trouver de solution à mon problème !

Help !!!

je ne sais si tu utilise un treegrid ou un treepanel
mais sur un treepanel le text afiché par un noeud est 'text' et non 'name'

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        text: "root",
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "algebra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
});
 
Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: true,
    renderTo: Ext.getBody()
});

avec un treegrid dans le treestore tu dois définir les colonnes à afficher (columns)
tu as un exemple http://docs-origin.sencha.com/extjs/...une/#tree-grid

A+JYT

Salut Sekaijin,

J'utilise un Treegrid en mode MVC et effectivement je me suis servi de l'exemple fourni par la doc pour le construire.

Voici mon model, store et ma vue, je ne comprends pas pourquoi je ne vois pas le texte du Root mais aussi pourquoi le rootVisible: false ne fonctionne pas.

Peut être pourrais tu jeter un coup d’œil pour voir ce qui ne va pas...
mon Tree-Grid possède une seule colonne Name. Mon but final est de ne pas afficher le Root mais j'aurai aimé faire fonctionner correctement celui
avant de cacher le root. Mon JSON est dans le premier post.

D'avance merci pour ton aide,

STORE

Code:

1
2
3
4
5
Ext.define('PP.store.user.Folders', {
    extend:     'Ext.data.TreeStore',
    model:      'PP.model.user.Folder',
    autoLoad:   false
});

MODEL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Ext.define("PP.model.user.Folder", {
    extend: 'Ext.data.Model',
 
    fields: [
        {name: 'id',        type: 'string'},
        {name: 'cid',       type: 'string'},
        {name: 'lid',       type: 'string'},
        {name: 'name',      type: 'string'},
        {name: 'comment',   type: 'string'},
        {name: 'created',   type: 'string' }, 
        {name: 'updated',   type: 'string' }, 
        {name: 'result',    type: 'int'},
        {name: 'lft',       type: 'int'},
        {name: 'rght',      type: 'int'},
        {name: 'level',     type: 'int'}
    ],
 
    // On fournit un proxy AJAX au modèle
    proxy: {
        type: 'ajax',        
        url: 'data/datatree.json'  
    }
});

et enfin ma VUE

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
Ext.define("PP.view.TreeFolders", {
    extend      : 'Ext.tree.Panel',
    alias       : 'widget.treefolders',
    xtype       : 'tree-grid',
    width       : 250,
    collapsible : true,
    region      : 'west',
    split       : true,
    bodyStyle   : 'background-color:#FFFFFF;',
    bodyPadding : 0,
    defaults: {
        // implicitly create Container by specifying xtype
        style: {
            borderWidth : '0px',
            borderStyle : 'solid'
        }
    },
 
    title           : '<font style="font-size: 18px;">FOLDERS</font>',
    layout          : 'border',
    animate         : true,
    frame           : true,
    useArrows       : true,
 
    rootVisible     : true,
 
    multiSelect     : true,
    singleExpand    : false,
    store           : 'PP.store.user.Folders',
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            appendOnly: true
        }
    },
    hideHeaders     : true,
 
    columns: [{
                xtype       : 'treecolumn', //this is so we know which column will show the tree
                text        : 'Name',
                flex        : 1,
                sortable    : true,
                dataIndex   : 'name'
            }
    ]
});