How to create Placeholder in Extjs when item is dragged

Question

I want to create a placeholder in Extjs when you drag items from one panel to another panel. Items are dataView records.

Ext.application({
  name: 'Fiddle',

  launch: function () {
    simpsonsStore = Ext.create('Ext.data.Store', {
      storeId: 'simpsonsStore',
      fields: ['id', 'name', 'email'],
      data: [{
        name: 'Lisa',
        email: '[email protected]',
        id: 1
      }, {
        name: 'Bart',
        email: '[email protected]',
        id: 2
      }, {
        name: 'Homer',
        email: '[email protected]',
        id: 3
      }, {
        name: 'Marge',
        email: '[email protected]',
        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

I want to create placeholder something like this when you drag any item in this: http://www.bryntum.com/examples/taskboard-latest/examples/kitchensink/index.html#examples/basic

Answer 1

I have updated your fiddle example and made a working solution. The main problem is selection of text while dragging. With this solution, we got rid off that by using flat looking buttons.

Changes

• index.css added.
• jetsonsStore defined.
• renderFunc created to remove duplica code.
• tpl changed.

I don't have a fiddle account, so i will share the code in here.

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: '[email protected]', id: 101},
                {name: 'Bart', email: '[email protected]', id: 102},
                {name: 'Homer', email: '[email protected]', id: 103},
                {name: 'Marge', email: '[email protected]', id: 104}
            ]
        });
        jetsonsStore = Ext.create('Ext.data.Store', {
            fields: ['id', 'name', 'email'],
            data: [
                {name: 'George', email: '[email protected]', id: 201},
                {name: 'Jane', email: '[email protected]', id: 202},
                {name: 'Judy', email: '[email protected]', id: 203},
                {name: 'Elroy', email: '[email protected]', 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
                        }
                    }
                ]
            }]
        });
    }
});