Lecture de la base de données pour remplir treepanel

Version imprimable

02/02/2014, 21h38
jerada

Lecture de la base de données pour remplir treepanel

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
03/02/2014, 12h59
sekaijin
Code:

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

Bonjour

Je vous remercie pour votre réponse

en fait j'ai creer un treepanel :

Code:

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.hrchyindicator',
            storeId: 'MyTreeStore',
            folderSort: true,
            proxy: {
                type: 'ajax',
                url: '<div class="bbcode_container">
	<div class="bbcode_description">Code:</div>
	<hr /><code class="bbcode_code">le chemin de la base de donnes<span style="color: #FF0000;">'</span></code><hr />
</div>            },
            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

06/02/2014, 07h23
sekaijin

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

Code:

store: 'MyTreeStore',

si myStore est la variable contenant le store

Code:

store: MyTreeStore,

A+JYT

j'ai creer le sotre

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('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:

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:

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

06/02/2014, 19h52
sekaijin

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

A+JYT

Bonjour Qu'on je teste cet exemple ca fonctionne bien

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
 
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

07/02/2014, 10h43
abraxis
Bonjour,
Code:

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.

@+

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:

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:

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:

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 :(:(:(:(

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

Citation:

Loading and Saving Tree Data using a Proxy

Citation:

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:

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