Discussion :

[jerada]

Bonjour,

s'il vous plait j'ai une question :

comment on peut chargé les donnes de la base de données via Tree Panel

avec sencha architect

Merci

[sekaijin]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
});

le store doit être un Ext.data.TreeStore associé à un Ext.data.TreeModel
cela fonctionne exactement de la même façon qu'un Ext.data.Store.

pour lire les données dans une base sur le serveur il faut utiliser un proxy
tu trouveras dans ce forum une longue discu sur ce sujet

A+JYT

[jerada]

Bonjour

Je vous remercie pour votre réponse

en fait j'ai creer un treepanel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 xtype: 'panel',
                            itemId: 'treePanel',
                            title: 'My Tab',
                            items: [
                                {
                                    xtype: 'treepanel',
                                    itemId: 'treePanel',
                                    title: 'My Tree Panel',
                                    store: 'MyTreeStore',
                                    rootVisible: false,
                                    viewConfig: {
 
                                    }
                                }

apres j'ai creer un store proxy :

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
constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.hrchyindicator',
            storeId: 'MyTreeStore',
            folderSort: true,
            proxy: {
                type: 'ajax',
                url: '

	

	
Code  :
	
Sélectionner tout -
	Visualiser dans une fenêtre à part
	
le chemin de la base de donnes'
            },
            sorters: {
                property: 'text'
            }
        }, cfg)]);
    }

en suite je l'ai associé avec son model

et dans la partie seveur j'ai appeler ma fonction

mais il m'affiche pas le tree panel :
je sais pas c'est quoi le probleme avec ça

[sekaijin]

tu n'as pas associé le store à ton treePanel mais une chaine de caractère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

store: 'MyTreeStore',

si myStore est la variable contenant le store

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

store: MyTreeStore,

A+JYT

[jerada]

j'ai creer le sotre

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
Ext.define('MyApp.store.MyTreeStore1', {
    extend: 'Ext.data.TreeStore',

    requires: [
        'MyApp.model.hrchyindicator'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.test',
            storeId: 'MyTreeStore1',
            proxy: {
                type: 'ajax',
                url: 'le chemin de ma base de donnes ',
                reader: {
                    type: 'json'
                }
            }
        }, cfg)]);
    }
});

******************************************
j'ai creer le model

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
Ext.define('MyApp.model.hrchyindicator', {
    extend: 'Ext.data.Model',
 
    fields: [
        {
            name: 'pere'
        },
        {
            name: 'fils'
        }
 
    ]
});

**********************************
et voila le view

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
 xtype: 'treepanel',
                            height: 250,
                            itemId: 'treePanel',
                            width: 400,
                            title: 'My Tree Grid Panel',
                            store: 'MyTreeStore1',
                            viewConfig: {

                            },
                            columns: [
                                {
                                    xtype: 'treecolumn',
                                    dataIndex: 'pere',
                                    text: 'Nodes',
                                    flex: 1
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'fils',
                                    text: 'Value'
                                }
                            ]
                        }

************************

mais il m'affiche la liste vide

[sekaijin]

tu as lu le guide sur le sujet ?
http://docs-origin.sencha.com/extjs/4.2.2/#!/guide/tree

A+JYT

[jerada]

Bonjour Qu'on je teste cet exemple ca fonctionne bien

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
 
var tree = Ext.create('Ext.tree.Panel', {
    renderTo: Ext.getBody(),
    title: 'TreeGrid',
    width: 300,
    height: 150,
    fields: ['name', 'description'],
    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        dataIndex: 'name',
        width: 150,
        sortable: true
    }, {
        text: 'Description',
        dataIndex: 'description',
        flex: 1,
        sortable: true
    }],
    root: {
        name: 'Root',
        description: 'Root description',
        expanded: true,
        children: [{
            name: 'Child 1',
            description: 'Description 1',
            leaf: true
        }, {
            name: 'Child 2',
            description: 'Description 2',
            leaf: true
        }]
    }
});

mais moi je veux apartir de la base de donnes

[abraxis]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.....
proxy: {
    type: 'ajax',
    url: 'le chemin de ma base de donnes' ,
    reader: {
        type: 'json'
    }
}
....

Tu ne peut pas te connecter directement sur la base de données.
Test avec un fichier json.
Après il te suffira de pointer vers une fonction PHP ou JAVA (ou autre) pour récupérer tes données dans la bdd et les renvoyer au format JSON.

Le lien de sekaijin te donne des exemples.

@+

[jerada]

Bonjour abraxis ,

d'accord je peux pas connecter vers la base de donnes directement , donc je vais enlever le URL ,

a votre avis est ce ma structure est bonne merci , je suis bloqué est je sais pas quoi faire , mon bur j'ai 2 colonne dans une table pere, fils

et je veux les afficher sous format d'un treepanel avec pere et acote fils

j'ai fait la requete pour affichier pere et fils de cette table

mais je pense que je sais pas comment les recuperer

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
Ext.define('MyApp.store.MyTreeStore1', {
    extend: 'Ext.data.TreeStore',
 
    requires: [
        'MyApp.model.Table'
    ],
 
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            expanded: 'false',
            data: {
                pere: 'pere',
                fils: 'fils'
            },
            autoLoad: true,
            model: 'MyApp.model.hrchyindicator',
            storeId: 'MyTreeStore1',
            root: {
                pere: 'la liste des peres',
                fils: 'les liste des fils',
                expanded: true
            },
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'json', ===> ici  je sais pas quoi faire 
 
                }
            },
            sorters: {
                property: 'text'
            }
        }, cfg)]);
    }
});

*******************************

le model

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
 
 {
                            xtype: 'treepanel',
                            itemId: 'treePanel',
                            title: 'informations',
                            store: 'MyTreeStore1',
                            root: {
                                pere: 'pere',
                                fils: 'fils'
                            },
                            columns: [
                                {
                                    xtype: 'treecolumn',
                                    width: 150,
                                    dataIndex: 'pere',
                                    text: 'pere'
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'fils',
                                    text: 'fils',
                                    flex: 1
                                }
                            ]
                        }

****************************************

dans le cote javascript

voila mon code

Ext.define('MyApp.controller.override.treePanel', {
override: 'MyApp.controller.treePanel',

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
    onTreepanelBeforeRender: function(component, eOpts) {
    		alert('onTreepanelBeforeRender');
    		var tree = this.getTreePanel();
                selectfonction(TryCatch.wrap(function (allPere){
    	    	var treepanel = tree.store;
    	    	 //treepanel.load(allPere);        	
    	         }),this);     
        	//tree.show();*/		   
    },

que dois faire c'est urgent pour moi merci beaucoup

[sekaijin]

dans le lien que je t'ai donné tu as une progréssion pour lire sur le serveur les données

Loading and Saving Tree Data using a Proxy

Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
],
proxy: {
type: 'ajax',
api: {
create: 'createPersons',
read: 'readPersons',
update: 'updatePersons',
destroy: 'destroyPersons'
}
}

});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Person',
root: {
name: 'People',
expanded: true
}
});

Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
width: 300,
height: 200,
title: 'People',
store: store,
columns: [
{ xtype: 'treecolumn', header: 'Name', dataIndex: 'name', flex: 1 }
]
});

il te suffit de remplacer les url du proxy par les tiennes
le serveur doit renvoyer des donnée sous la forme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
{
    "success": true,
    "children": [
        { "id": 1, "name": "Phil", "leaf": true },
        { "id": 2, "name": "Nico", "expanded": true, "children": [
            { "id": 3, "name": "Mitchell", "leaf": true }
        ]},
        { "id": 4, "name": "Sue", "loaded": true }
    ]
}

on t'explique ensuite que dynamiquement lorsque tu va ouvrir un neud l'url de lecture sera appelé avec un paramètre
/readPersons?node=4

tu prends l'exemple tel quel tu le teste jusqu'au bout avec tes url vers des fichier satiques qui contienne le json tel que décrit dans la doc.

tu adapte l'exemple à ton modèle et tu remplace le contenu json par des exemples de données statiques

lorsque tout marche tu remplace l'url vers les fichier statique par des url vers php/asp/java/nodejs/cgi/tcl/.... au choix tu fais comme pour n'importe quelle url du langage que tu as choisi. tu lis les parametres tu intéroge ta base et tu construis le JSON correspondant à ce que tu avais dans la version statique

et c'est tout.

A+JYT