Menu accordion dynamique avec dans chaque onglet un treePanel

**beben06** · 09/07/2010, 10h22

Bonjour,

Je tente de réaliser un menu de style accordion géré dynamiquement avec dans chaque onglet un treePanel.

Ce qui marche: L 'affichage du menu accordion dynamique, 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
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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<script type="text/javascript">
 
<?php 
                $db = new Database();
                $nb_rows = $db->select("SELECT * FROM users");
                if($nb_rows>0)
                        {
                                while($row = $db->next_row())
                                {
                                        echo "var item".$row["id"]." =  new Ext.Panel({";
                                        echo "title: '".$row["login"]."',";
                                        echo "html: '<div id='tree' ><div>',"; // ICI 
                                        echo "cls:''});";
                                        
                                }
                        }
                ?>
 
var accordion = new Ext.Panel({
                region:'west',
                title: 'abylsen',
                margins:'5 0 5 5',
                split:true,
                width: 210,
                layout:'accordion',
                items: [<?php 
                                $nb_rows = $db->select("SELECT * FROM users");
                                if($nb_rows>0)
                                        {
                                                while($row = $db->next_row())
                                                {
                                                        echo "item".$row["id"].",";
                                                }
                                        }
                ?>]
            });
Ext.onReady(function() {
 
var Tree = Ext.tree;
 
var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: '../action/tree_action.php?action=getFolderList',
 
       root: {
            nodeType: 'async',
            text: 'ABYLSEN',
            draggable: true,
            id: 'src'
        }
    });
 
    // render the tree
    tree.render('tree');
 
var viewport = new Ext.Viewport({
                layout:'border',
                items:[ 
                       new Ext.BoxComponent({
                        region:'north',
                    	el:'Header',
                        height: 75
                        }),
                        accordion,
                        {
                    region: 'center', 
                    title: 'aaa', 
                    layout: 'border',
          			items:[{
              			layout: 'fit', 
	                    region:'center',
	                    border: 'false',
	                    minWidth: '975',
                    	items:[]
                }]
            },]});
      });
    </script>

Mon probleme (au niveau du commentaire "ICI")

Si j'enleve la balise div avec l'ancre pour inserer mon arbre ca fonctionne tres bien (mais je n'ai pas d'arbre dans les onglets

)

Si je met la balise firebug me dit que j'ai un probleme de }
Bizarre non? Quelqu'un a une piste? merci. ++

**Mako 5013** · 09/07/2010, 10h29

Bonjour,

Je ne sais pas si ça peut être ça, mais ta balise, tu ne la fermes pas, du coup, tu en ouvres une seconde (sur la ligne du ICI).

Mako

**beben06** · 09/07/2010, 10h41

Merci Mako de ta réponse,

Il y a déjà cette erreur au niveau du div. Mais cela ne marchait pas quand meme alors je me suis débrouillé.

Au lieu d'insérer le treepanel dans les panels de mon accordion , j'ai directement créer plusieurs treepanel que j'ai mis dans mon accordion. pour ceux que ca interesse, c'est cadeau:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<script type="text/javascript">
 
var Tree = Ext.tree;
<?php   $db = new Database();
        $nb_rows = $db->select("SELECT * FROM users");
        if($nb_rows>0)
                {
                        while($row = $db->next_row())
                        {
                echo "
        var tree".$row["id"]." = new Tree.TreePanel({
        title:'".$row["login"]."',
               
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: '../action/tree_action.php?action=getFolderCVList&id=".$row["id"]."',

       root: {
            nodeType: 'async',
            text: 'microsoft',
            draggable: true,
            id: 'src'
        }
    });
    tree".$row["id"].".on('click', function(n){
        store.load({params:{id:n.id}});
        });
    tree".$row["id"].".getRootNode().expand();
    ";          }
                }
?> 
 
    var accordion = new Ext.Panel({
        region:'west',
        title: 'abylsen',
        margins:'5 0 5 5',
        split:true,
        width: 210,
        layout:'accordion',
        items: [<?php 
                                $nb_rows = $db->select("SELECT * FROM users");
                                if($nb_rows>0)
                                        {
                                                while($row = $db->next_row())
                                                {
                                                        echo "tree".$row["id"].",";
                                                }
                                        }
                ?>]
    });
</script>

++

**sekaijin** · 12/07/2010, 09h51

ton code me donne à penser que tu n'as pas bien saisie la philosophe du truc

d'un côté un URL qui donne une pahe HTML
dans celle ci un JS qui définit ton Layaout acordeaon contenant tes tree panel

chaque tree panel à une URL vers un php pour charger ses données

ainsi ton code javascript n'est pas rechargé à chaque appel
tu optime ta présentation dans le html et le js statique
et ton php ne s'occupe que des données

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
{
    id: 'cl-win',
    title:  controller.locale.title,
    width: controller.width,
    height: controller.height,
    x:  controller.x,
    y:  controller.y,
    //iconCls: 'accordion',
    shim:false,
    animCollapse:false,
    closable:false,
    constrainHeader:true,
 
    border:false,
    layout: 'fit',
 
    items: [{
        xtype: 'panel',
        layout: 'accordion',
        border: false,
        split:true,
        margins: '2 0 5 5',
        width: 275,
        minSize: 100,
        maxSize: 500,
        items: [{
            xtype: 'treepanel',
            title: controller.locale.flows.title,
            id:'flow-tree',
            rootVisible:false,
            lines:false,
            autoScroll:true,
            tbar:[{
                id:'flow-refresh',
                iconCls:'icon_refresh',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('refreshFlows');
                }
            },'-',{
                tooltip:  controller.locale.flows.add,
                iconCls:'flow-add',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('addFlow');
                }
            },' ',{
                tooltip:  controller.locale.flows.edit,
                iconCls:'flow-edit',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('editFlow');
                }
            },' ',{
                tooltip:  controller.locale.flows.remove,
                iconCls:'flow-delete',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('removeFlow');
                }
            }],
            loader: controller.model.flows.getReader(),
            root: new Ext.tree.AsyncTreeNode({
                id:'root',
                expanded:false  //au démarrage pas de donnée disponibles
            })
        },
        {
            xtype: 'treepanel',
            title: controller.locale.sites.title,
            id:'site-tree',
            rootVisible:false,
            lines:false,
            autoScroll:true,
            tbar:[{
                id:'site-refresh',
                iconCls:'icon_refresh',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('refreshSites');
                }
            },'-',{
                tooltip:  controller.locale.sites.add,
                iconCls:'site-add',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('addSite');
                }
            },' ',{
                tooltip:  controller.locale.sites.edit,
                iconCls:'site-edit',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('editSite');
                }
            },' ',{
                tooltip:  controller.locale.sites.remove,
                iconCls:'site-delete',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('removeSite');
                }
            }],
            loader: controller.model.sites.getReader(),
            root: new Ext.tree.AsyncTreeNode({
                id:'root',
                expanded:false  //au démarrage pas de donnée disponibles
            })
        },
        {
            xtype: 'treepanel',
            title: controller.locale.ressources.title,
            id:'res-tree',
            rootVisible:false,
            lines:false,
            autoScroll:true,
            tbar:[{
                id:'res-refresh',
                iconCls:'icon_refresh',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('refreshRess');
                }
            },'-',{
                tooltip:  controller.locale.ressources.add,
                iconCls:'res-add',
                controller: controller,
                menu:{
                    items: [{
                        text: 'File',
                        iconCls: 'file',
                        controller: controller,
                        handler: function() {
                            this.controller.fireEvent('addRes', {type: 'file'});
                        }
                    },{
                        text: 'Ftp',
                        iconCls: 'ftp',
                        controller: controller,
                        handler: function() {
                            this.controller.fireEvent('addRes', {type: 'ftp'});
                        }
                    },{
                        text: 'Sap',
                        iconCls: 'sap',
                        controller: controller,
                        handler: function() {
                            this.controller.fireEvent('addRes', {type: 'sap'});
                        }
                    },{
                        text: 'Src',
                        iconCls: 'src',
                        controller: controller,
                        handler: function() {
                            this.controller.fireEvent('addRes', {type: 'src'});
                        }
                    }]
                }
            },' ',{
                tooltip:  controller.locale.ressources.edit,
                iconCls:'res-edit',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('editRes');
                }
            },' ',{
                tooltip:  controller.locale.ressources.remove,
                iconCls:'res-delete',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('removeRes');
                }
            }],
            loader: controller.model.ressources.getReader(),
            root: new Ext.tree.AsyncTreeNode({
                id:'root',
                expanded:false  //au démarrage pas de donnée disponibles
            })
        },
        {
            xtype: 'treepanel',
            title: controller.locale.applications.title,
            id:'app-tree',
            rootVisible:false,
            lines:false,
            autoScroll:true,
            tbar:[{
                id:'app-refresh',
                iconCls:'icon_refresh',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('refreshApps');
                }
            },'-',{
                tooltip:  controller.locale.applications.add,
                iconCls:'app-add',
                controller: controller,
                handler: function() {
                    this.controller.fireEvent('addApp');
                }
            },' ',{
                tooltip:  controller.locale.applications.edit,
                iconCls:'app-edit',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('editApp');
                }
            },' ',{
                tooltip:  controller.locale.applications.remove,
                iconCls:'app-delete',
                controller: controller,
                disabled: true,
                handler: function() {
                    this.controller.fireEvent('removeApp');
                }
            }],
            loader: controller.model.applications.getReader(),
            root: new Ext.tree.AsyncTreeNode({
                id:'root',
                expanded:false  //au démarrage pas de donnée disponibles
            })
        }]
    }]
}

Ceci ne défini que le l'accordéon avec ses tree panel et leur bouton
les donnés seront chargées par des reader
controller.model.ressources.getReader() retourn le reader des resources (les donnés que je veux afficher)
un exemple de reader

Code :

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

1
2
3
4
5
6
        dataReader: new Ext.tree.TreeLoader({
            url: Ext.app.baseUrl + 'res/getList/',
            requestMethod: 'GET',
            preloadChildren: true,
            clearOnLoad: false
        })

kle pannel contenant les ressource invoquera l'URL Ext.app.baseUrl + 'res/getList/' qui est un php retournant les données pour ce tree panel

côté php on produit un JSON

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    public function getlistAction()
    {
        $node = $this->_getParam('node', 'root'); //récupère le paramètre node HTTP GET
 
        $this->response = array(); //la réponse est un tableau
        if ('root' == $node) {
            $data = $this->model->getResList(); //exec de la requête sur la racine
        } else {
            list($type, $node) = explode('_', $node);
            $data = $this->model->getAppListByResId($node); //exec de la requête pour un fils
        }
 
        //construction de la réponse
        $res = null;
        if ($data) foreach ($data as $value) {
 
        	if ((null == $res) || ($res['text'] != $value->res_name)) {
                if (null != $res) {
                    array_push($this->response, $res);
                }
                if ('root' == $node) {
                    $res = array(
                        'id' => $value->res_type . '_' . $value->res_id,
                        'text' => $value->res_name,
                        'iconCls' => $value->res_type,
                        'type' =>  $value->res_type,
                        'singleClickExpand' => false,
                        'expanded' => false,
                        'leaf' => (0 == $value->sys_count)
                    );
                } else {
                    $res = array(
                        'id' => 'sys_' . $value->res_id . '_' . $value->app_id,
                        'text' => $value->site_code . ': ' . $value->sys_name,
                        'iconCls' => 'app',
                        'type' =>  'app',
                        'leaf' => true
                    );
                }
            }
 
            if (('root' == $node) && ('' != $value->sys_name)) {
                $res['leaf'] = false;
            }
        }
        array_push($this->response, $res);
 
        //encodage JSON
        Zend_Loader::loadClass('Fast_Json_Encoder');
        echo utf8_encode(preg_replace('/"__className":"[^\"]+",/i', '',Fast_Json_Encoder::encode($this->response)));
    }

c'est tout l'avantage de lib Conme EXTJS
on sépare la partie présentation EXTJS des la source de donnée

A+JYT

Menu accordion dynamique avec dans chaque onglet un treePanel

Ext JS / Sencha

Discussions similaires

Partager

Partager