Faites glisser de l'arbre à div

Question

J'essaie d'implémenter un glisser-déposer senario à partir d'un TreePanel extJs dans un div dans le corps de la page. J'ai suivi un exemple par Saki here.

Jusqu'à présent, j'ai le code ci-dessous:

var contentAreas = new Array(); 
var tree = new Ext.tree.TreePanel({ 
       title : 'Widgets', 
       useArrows: true, 
       autoScroll: true, 
       animate: true, 
       enableDrag: true, 
       border: false, 
       layout:'fit', 
       ddGroup:'t2div', 
       loader:new Ext.tree.TreeLoader(), 
       root:new Ext.tree.AsyncTreeNode({ 
        expanded:true, 
        leaf:false, 
        text:'Tree Root', 
        children:children 
       }), 
       listeners:{ 
        startdrag:function() { 
         $('.content-area').css("outline", "5px solid #FFE767"); 
        }, 
        enddrag:function() { 
         $('.content-area').css("outline", "0"); 
        } 
       } 
      }); 

      var areaDivs = Ext.select('.content-area', true); 
      Ext.each(areaDivs, function(el) { 
       var dd = new Ext.dd.DropTarget(el, { 
        ddGroup:'t2div', 
        notifyDrop:function(ddt, e, node) { 
         alert('Drop'); 
         return true; 
        } 
       }); 
       contentAreas[contentAreas.length] = dd; 
      }); 

La traînée commence et les faits saillants div mais quand je reçois sur la div il ne montre pas comme une cible de dépôt valide et la baisse échoue.

Ceci est ma première incursion dans extJS. Je suis JQuery à travers et à travers et je me bats en ce moment.

Toute aide serait appréciée.

Ian

Modifier

En outre, si je crée un groupe avec un objectif de baisse en elle, cela fonctionne très bien. Quelle est la différence entre la création d'un élément et la sélection d'un élément existant à partir du dom. C'est évidemment là où je me trompe mais je n'en suis pas plus sage. Je dois être capable de sélectionner des éléments dom existants et de les transformer en cibles de largage de sorte que le code ci-dessous ne soit pas une option.

Voici la cible de dépôt qui fonctionne

var target = new Ext.Panel({ 
       renderTo: document.body 
       ,layout:'fit' 
       ,id:'target' 
       ,bodyStyle:'font-size:13px' 
       ,title:'Drop Target' 
       ,html:'<div class="drop-target" ' 
         +'style="border:1px silver solid;margin:20px;padding:8px;height:140px">' 
         +'Drop a node here. I\'m the DropTarget.</div>' 

       // setup drop target after we're rendered 
       ,afterRender:function() { 
        Ext.Panel.prototype.afterRender.apply(this, arguments); 
        this.dropTarget = this.body.child('div.drop-target'); 
        var dd = new Ext.dd.DropTarget(this.dropTarget, { 
         // must be same as for tree 
         ddGroup:'t2div' 

         // what to do when user drops a node here 
         ,notifyDrop:function(dd, e, node) { 
          alert('drop'); 
          return true; 
         } // eo function notifyDrop 
        }); 
       } 
      }); 

Answer 1

Voir si l'ajout true comme deuxième param ici fait une différence:

var areaDivs = Ext.select('.content-area', true); 

Comme une note esthétique, le nom de param e indique conventionnellement un objet événement (comme dans le deuxième arg de notifyDrop). Pour un élément, el est plus typique. N'a pas d'importance fonctionnelle, mais semble bizarre à quelqu'un utilisé pour Ext code pour voir e passé dans le constructeur DropTarget.

Answer 2

Si vous rencontrez des problèmes de dupliquer un exemple de travail telle que, copier toute la chose, puis modifier à vos besoins ligne par ligne - vous pouvez ne va pas mal.

Answer 3

Comme je sais que vous ne pouvez pas définir DropZone à un élément Ext, juste au composant Ext. Donc, cela pourrait être votre problème. Essayez d'utiliser DropTarget au lieu de DropZone.