Draggable Extjs Ext.grid.Panel in Ext.container.Viewport

Question

I am trying to create a draggable grid inside of a Viewport, where the grid dd is constrained only within the viewport container. (Ultimately the grid(s) will sit inside of a tab panel, but if I can get this simpler example working and understood I can take it from there.) I could put the following grid panel into a window, getting draggability out of the box, and then add this window to a Viewport, but the Extjs4 layout documentation seems to warn against this:

"Overnesting is a common problem. An example of overnesting occurs when a GridPanel is added to a TabPanel by wrapping the GridPanel inside a wrapping Panel (that has no layout specified) and then add that wrapping Panel to the TabPanel. The point to realize is that a GridPanel is a Component which can be added directly to a Container."

-- Note: Data and example code heavily lifted from sencha docs --

  Ext.create('Ext.data.Store', {
      storeId:'simpsonsStore',
      fields:['name', 'email', 'phone'],
      data:{'items':[
          { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
          { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
          { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
          { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
      ]},
      proxy: {
          type: 'memory',
          reader: {
              type: 'json',
              root: 'items'
          }
      }
  });

  Ext.create('Ext.container.Viewport', {
    items: [
      { xtype: 'gridpanel',
        title: 'Simpsons',
        closable: true,
        collapsible: true,
        animCollapse: true,
        draggable: true,
        resizable: true,
        constrain: true,
        maximizable: true,
        headerPosition: 'top',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        viewConfig: {
          plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
            }
        },
        height: 200,
        width: 400
      }
    ]
  });

This code results in a grid that is draggable (clickable and draggable), but snaps back into the original position as it's dropped (unclicked).

What's the best way forward, from a code-to-work as well as a best-practice (if I'm reading the Extjs cautioning I quoted above)?

Taking a look at the Window source, I could add the code below to DD, but that does not seems appropriate here (i.e. I am creating a default Grid class to inherit my components from):

initDraggable: function() {

  var me = this;
  var ddConfig;

  if (!me.header) {
    me.updateHeader(true);
  }

  if (me.header) {
    ddConfig = Ext.applyIf({
      el: me.el,
      delegate: '#' + me.header.id
    }, me.draggable);

    // Add extra configs if Window is specified to be constrained
    if (me.constrain || me.constrainHeader) {
      ddConfig.constrain = me.constrain;
      ddConfig.constrainDelegate = me.constrainHeader;
      ddConfig.constrainTo = me.constrainTo || me.container;
    }

    me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
    me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
  }

}//initDraggable

Is there a mixin available that I'm not aware of, or if not would it be appropriate to create a mixin from the above code?

Answer 1

I gave up and decided to put the gridpanels onto windows objects, then managed their visibility through the activate/deactivate events on the tab panels. It was a solution suggested to me and, aside from the warning above, was much easier to implement than anything else I found.