Comment créer un espace réservé dans Extjs lorsque l'élément est déplacé

Question

Je souhaite créer un espace réservé dans Extjs lorsque vous faites glisser des éléments d'un panneau vers un autre panneau. Les éléments sont des enregistrements DataView.

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
    simpsonsStore = Ext.create('Ext.data.Store', { 
     storeId: 'simpsonsStore', 
     fields: ['id', 'name', 'email'], 
     data: [{ 
     name: 'Lisa', 
     email: 'lisa@simpsons.com', 
     id: 1 
     }, { 
     name: 'Bart', 
     email: 'bart@simpsons.com', 
     id: 2 
     }, { 
     name: 'Homer', 
     email: 'homer@simpsons.com', 
     id: 3 
     }, { 
     name: 'Marge', 
     email: 'marge@simpsons.com', 
     id: 4 
     }] 
    }); 

    Ext.create('Ext.panel.Panel', { 
     scrollable: 'horizontal', 
     bodyCls: 'scrollBarOn', 
     region: 'center', 
     width: '100%', 
     height: 800, 
     layout: 'hbox', 
     renderTo: Ext.getBody(), 
     items: [{ 
     xtype: 'panel', 
     width: 200, 
     height: 500, 
     items: [{ 
      xtype: 'dataview', 
      itemSelector: 'div.detail', 
      tpl: ['<tpl for=".">', 
      '<div class="detail">{name}</div>', '</tpl>' 
      ], 
      margin: '0 0 0 0', 
      store: simpsonsStore, 
      scrollable: 'vertical', 
      focusable: false, 
      setTemplate: function (template, itemSelector) { 
      this.tpl = template; 
      this.itemSelector = itemSelector; 
      this.refresh(); 
      }, 
      listeners: { 
      render: function (v) { 
       var currentRef = this; 
       new Ext.view.DragZone({ //Create Drag Zone 
       view: currentRef, 
       ddGroup: 'kanbanDataviewDrag', 
       dragText: '1 row selected' 
       }); 
       new Ext.view.DropZone({ //Create Drop Zone 
       view: currentRef, 
       ddGroup: 'kanbanDataviewDrag', 
       handleNodeDrop: function (data, record, 
        position) { //When Handle Node Drop 
        var view = this.view, 
        store = view.getStore(), 
        index, records, i, len; 
        if (data.copy) { 
        records = data.records; 
        data.records = []; 
        for (i = 0, len = records.length; i < 
         len; i++) { 
         data.records.push(records[i].copy(
         records[i].getId())); 
        } 
        } else { 
        data.view.store.remove(data.records, 
         data.view === view); 
        } 
        index = store.indexOf(record); 
        if (position !== 'before') { 
        index++; 
        } 
        store.insert(index, data.records); 
        store.commitChanges(); 
       } 
       }); 
      } 
      } 
     }] 
     }, { 
     xtype: 'panel', 
     width: 200, 
     height: 500, 
     items: [{ 
      xtype: 'dataview', 
      itemSelector: 'div.detail', 
      tpl: ['<tpl for=".">', 
      '<div class="detail">{name}</div>', '</tpl>' 
      ], 
      margin: '0 0 0 0', 
      store: simpsonsStore, 
      scrollable: 'vertical', 
      focusable: false, 
      setTemplate: function (template, itemSelector) { 
      this.tpl = template; 
      this.itemSelector = itemSelector; 
      this.refresh(); 
      }, 
      listeners: { 
      render: function (v) { 
       var currentRef = this; 
       new Ext.view.DragZone({ //Create Drag Zone 
       view: currentRef, 
       ddGroup: 'kanbanDataviewDrag', 
       dragText: '1 row selected' 
       }); 
       new Ext.view.DropZone({ //Create Drop Zone 
       view: currentRef, 
       ddGroup: 'kanbanDataviewDrag', 
       handleNodeDrop: function (data, record, 
        position) { //When Handle Node Drop 
        var view = this.view, 
        store = view.getStore(), 
        index, records, i, len; 
        if (data.copy) { 
        records = data.records; 
        data.records = []; 
        for (i = 0, len = records.length; i < 
         len; i++) { 
         data.records.push(records[i].copy(
         records[i].getId())); 
        } 
        } else { 
        data.view.store.remove(data.records, 
         data.view === view); 
        } 
        index = store.indexOf(record); 
        if (position !== 'before') { 
        index++; 
        } 
        store.insert(index, data.records); 
        store.commitChanges(); 
       } 
       }); 
      } 
      } 
     }] 
     }] 
    }); 
    } 
}); 

Fiddle: https://fiddle.sencha.com/#fiddle/1i2u

Je veux créer l'espace réservé quelque chose comme ceci lorsque vous faites glisser un élément dans ce: http://www.bryntum.com/examples/taskboard-latest/examples/kitchensink/index.html#examples/basic

Answer 1

J'ai mis à jour votre exemple violon et fait une solution de travail. Le principal problème est la sélection du texte en faisant glisser. Avec cette solution, nous nous sommes débarrassés de cela en utilisant des boutons plats.

Changements

• index.css ajouté.
• jetsonsStore défini.
• renderFunc créé pour supprimer le code dupliqué.
• tpl modifié.

Je n'ai pas de compte de violon, donc je vais partager le code ici.

index.css

.detail 
{ 
    border: 0; 
    background: none; 
    box-shadow:none; 
    border-radius: 0px; 
} 

app.js

var renderFunc = function(v) { 
    var currentRef = this; 
    new Ext.view.DragZone({ //Create Drag Zone 
     view: currentRef, 
     ddGroup: 'kanbanDataviewDrag', 
     dragText: '1 row selected' 
    }); 
    new Ext.view.DropZone({ //Create Drop Zone 
     view: currentRef, 
     ddGroup: 'kanbanDataviewDrag', 
     handleNodeDrop: function(data, record, position) { //When Handle Node Drop 
      var view = this.view, 
       store = view.getStore(), 
       index, records, i, len; 
      if (data.copy) { 
       records = data.records; 
       data.records = []; 
       for (i = 0, len = records.length; i < len; i++) { 
        data.records.push(records[i].copy(records[i].getId())); 
       } 
      } else { 
       data.view.store.remove(data.records, data.view === view); 
      } 
      index = store.indexOf(record); 
      if (position !== 'before') { 
       index++; 
      } 
      store.insert(index, data.records); 
      store.commitChanges(); 
     } 
    }); 
} 

var itemTeplate = function(){ 
    return '<div><button class="detail">{name}</button></div>'; 
} 

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     simpsonsStore = Ext.create('Ext.data.Store', { 
      fields: ['id', 'name', 'email'], 
      data: [ 
       {name: 'Lisa', email: 'lisa@simpsons.com', id: 101}, 
       {name: 'Bart', email: 'bart@simpsons.com', id: 102}, 
       {name: 'Homer', email: 'homer@simpsons.com', id: 103}, 
       {name: 'Marge', email: 'marge@simpsons.com', id: 104} 
      ] 
     }); 
     jetsonsStore = Ext.create('Ext.data.Store', { 
      fields: ['id', 'name', 'email'], 
      data: [ 
       {name: 'George', email: 'george@jetsons.com', id: 201}, 
       {name: 'Jane', email: 'jane@jetsons.com', id: 202}, 
       {name: 'Judy', email: 'judy@jetsons.com', id: 203}, 
       {name: 'Elroy', email: 'elroy@jetsons.com', id: 204} 
      ] 
     }); 

     Ext.create('Ext.panel.Panel', { 
      scrollable: 'horizontal', 
      bodyCls: 'scrollBarOn', 
      region: 'center', 
      width: '100%', 
      height: 800, 
      layout: 'hbox', 
      renderTo: Ext.getBody(), 
      items: [{ 
       xtype: 'panel', 
       width: 200, 
       height: 500, 
       items: [ 
        { 
         xtype: 'dataview', 
         itemSelector: 'div', 
         tpl: ['<tpl for=".">', itemTeplate(), '</tpl>'], 
         margin: '0 0 0 0', 
         store: simpsonsStore, 
         scrollable: 'vertical', 
         focusable: false, 
         mode: 'single', 
         setTemplate: function(template, itemSelector) { 
          this.tpl = template; 
          this.itemSelector = itemSelector; 
          this.refresh(); 
         }, 
         listeners: { 
          render: renderFunc 
         } 
        } 
       ] 
      }, 
        { 
       xtype: 'panel', 
       width: 200, 
       height: 500, 
       items: [ 
        { 
         xtype: 'dataview', 
         itemSelector: 'div', 
         tpl: ['<tpl for=".">', itemTeplate(), '</tpl>'], 
         margin: '0 0 0 0', 
         store: jetsonsStore, 
         scrollable: 'vertical', 
         mode: 'single', 
         focusable: false, 
         setTemplate: function(template, itemSelector) { 
          this.tpl = template; 
          this.itemSelector = itemSelector; 
          this.refresh(); 
         }, 
         listeners: { 
          render: renderFunc 
         } 
        } 
       ] 
      }] 
     }); 
    } 
});