Discussion :

[scorp_imaj]

Bonjour,
Jeune développeur en Extjs , je me retrouve confronté à un problème qui me bloque un peu pour la réalisation d'un projet .
Le but étant de créer une arborescence de dossiers/fichiers ..de pouvoir les déplacer dans l'arbre et mettre a jour la base de données pour que la place dans l'arborescence soit sauvegardée.
Je veux pouvoir déclencher une mise a jour de la base de données après un drag and drop dans le Treepanel .Je manque de connaissance sur le sujet .. j'arrive a créer le panel ainsi que créer une arborescence en fonction de la base de données mais la ...je coince.

Merci d'avance pour les réponses s'il y en a .

Voici mon code :

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
 
 
showOrder: function() {
 
      Ext.QuickTips.init();
 
	  var dragConfig = {
		  onBeforeDrag:function(dragData,eventObj)
		  {
			  return dragData.node.attributes.leaf;
		  }
	  };
 
	  var treeToOrder = new Ext.tree.TreePanel({
		  xtype:'treepanel',
		  autoScroll:true,
		  title: 'base',
		  animate: false,
		  ddGroup: 'StructureTree',
		  enableDD:true,
		  dragConfig: dragConfig,
 
		  loader : new Ext.tree.TreeLoader({
			  url: '/plugin/GestionOrdre/admin/getTree'
			  }),
		  root:{
			  text:'Liste des fichiers/dossiers a ordonner',
			  id:'Listetoorder',
			  expanded:true
		  }
	  });
 
 
 
        var ongletGO = new Ext.Panel({
            id:         "GestionOrdre_onglet",
            title:      "Gestion des ordre",
            iconCls:    "",
            border:     false,
            layout:     "fit",
            closable:   true,
	    items : treeToOrder
        });
 
 
}

[sekaijin]

je ne suis pas sur de tout saisir.

dans ton exemple il m'y a pas de onDrop tu n'as donc rien prévu pour le moment ou l'objet est déposé.

pour ce qui est des interaction avec la base
cherche les discu sur ce forum j'ai résement répondu à cette question dans le cadre d'un grid.

pour un arbre c'est le même principe. on associe à l'arbre un treeStore qui vas conserver localement les données de l'arbre.
associé à ce treeStore on mets un proxy qui lui se charge du dialogue avec le serveur. quand on recharge les données dans le store le proxy les demande au serveur et les mets dans le store. il informe alors l'arbre qu'il doit rafraîchir son affichage. si le contenu du store est modifié l'arbre se mets à jour mais le proxy envoie aussi la modif au serveur.

A+JYT

[scorp_imaj]

Bonjour,

Merci pour les infos . Désolé si les explications ne sont pas nette et précise mais je débute sur le forum.

En tout cas j'ai compris ce que vous m'avez di et vais me pencher sur le "onDrop" et rechercher des infos sur le forum etc .

Cordialement, Scorp*

[scorp_imaj]

Bonjour,

j'ai donc changé de direction et opté pour un autre mode de fonctionnement. Je veux depuis une base de données, générer un json tel que celui ci :

Code :

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

[{"text":"Menu Option 1","leaf":false,"children":[{"text":"fichier","leaf":true}]},{"text":"Menu Option 2","leaf":true},{"text":"Menu Option 3","leaf":true}]

Ensuite dans l'extjs pouvoir récupérer avec un bouton, la structure / l' arborescence de l'arbre apres le drag and drop de certains fichiers. Je l'enverrais au php qui decortiquera l'information pour la replacer en bdd .Avez vous une idée de comment s'y prendre ?
voici mon code extjs :

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 treeToOrder = new Ext.tree.TreePanel({
		  xtype:'treepanel',
		  autoScroll:true,
		  title: 'Tree ReOrder',
		  animate: false,
		  ddGroup: 'StructureTree',
		  enableDD:true,
		  rootVisible : true,
		  loader:new Ext.tree.TreeLoader({
			  dataUrl : '/plugin/GestionOrdre/admin/getTree'
		  }),
		  root: new Ext.tree.AsyncTreeNode({
				   text: 'Liste des fichiers/dossiers a ordonner' 
			}),
		 tbar : [
		 { 
		 text: 'Sauvegarder', 
		 handler: function() {
                          //sauvegarder la structure
                        } 
		}]
	  });
 
 
        var ongletGO = new Ext.Panel({
            id:         "GestionOrdre_onglet",
            title:      "Gestion des ordre",
            border:     false,
            layout:     "fit",
            closable:   true,
	   items : treeToOrder,
        });