आइटम को खींचने पर Extjs में प्लेसहोल्डर कैसे बनाएं

Question

जब आप एक पैनल से दूसरे पैनल में आइटम खींचते हैं तो मैं Extjs में प्लेसहोल्डर बनाना चाहता हूं। आइटम डेटा देखें रिकॉर्ड देखें।

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(); 
       } 
       }); 
      } 
      } 
     }] 
     }] 
    }); 
    } 
}); 

फिडल: https://fiddle.sencha.com/#fiddle/1i2u

मैं जब आप इस में किसी भी आइटम खींचें इस तरह प्लेसहोल्डर कुछ बनाना चाहते: http://www.bryntum.com/examples/taskboard-latest/examples/kitchensink/index.html#examples/basic

Answer 1

मैं अपने बेला उदाहरण अद्यतन और एक काम कर समाधान कर दिया है। खींचने के दौरान मुख्य समस्या पाठ का चयन है। इस समाधान के साथ, हमने फ्लैट दिखने वाले बटनों का उपयोग करके इसे छुटकारा दिलाया।

परिवर्तन

• index.css गयी।
• जेट्सन्सस्टोर परिभाषित।
• renderFunc डुप्लिकिका कोड को हटाने के लिए बनाया गया।
• tpl बदल गया।

मेरे पास कोई पहेली खाता नहीं है, इसलिए मैं यहां कोड साझा करूंगा।

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 
         } 
        } 
       ] 
      }] 
     }); 
    } 
});