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: '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

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

It's not really clear what you're asking. Are you referring to the gray placeholder that is created when you begin the drag, or the cloned node that follows the mouse? — Evan Trimboli, Oct 20 '16 at 06:31
Please read what I wrote, "yes" doesn't answer an "a or b" question. — Evan Trimboli, Oct 20 '16 at 10:23

score 1 · Answer 1 · answered Dec 29 '17 at 07:08

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

How to create Placeholder in Extjs when item is dragged

1 Answers1