Ext.container.Viewport 中的可拖动 Extjs Ext.grid.Panel答案

【问题标题】：Draggable Extjs Ext.grid.Panel in Ext.container.ViewportExt.container.Viewport 中的可拖动 Extjs Ext.grid.Panel
【发布时间】：2012-04-09 16:04:29
【问题描述】：

我正在尝试在视口内创建一个可拖动的网格，其中网格 dd 仅被限制在视口容器内。（最终网格将位于选项卡面板内，但如果我可以让这个更简单的示例工作并理解我可以从那里获取它。）我可以将以下网格面板放入一个窗口中，从框，然后将此窗口添加到视口，但 Extjs4 布局文档似乎对此提出警告：

"过度嵌套是一个常见的问题。 过度嵌套的一个例子发生在通过将 GridPanel 包裹在包裹面板（没有指定布局）中，然后将 GridPanel 添加到 TabPanel 中，然后将该包装面板添加到 TabPanel。要实现的一点是 GridPanel 是一个可以直接添加到容器的组件。"

-- 注意：数据和示例代码大量来自 sencha 文档--

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

此代码生成一个可拖动（可单击和可拖动）的网格，但在放下（未单击）时会弹回原始位置。

从代码到工作以及最佳实践（如果我正在阅读上面引用的 Extjs 警告），最好的前进方式是什么？

查看 Window 源代码，我可以将下面的代码添加到 DD，但这在这里似乎不合适（即我正在创建一个默认的 Grid 类来继承我的组件）：

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

是否有我不知道的 mixin，或者如果没有，是否适合从上述代码创建 mixin？

【问题讨论】：

标签： extjs extjs4 extjs4.1

【解决方案1】：

我放弃并决定将网格面板放在 windows 对象上，然后通过选项卡面板上的激活/停用事件管理它们的可见性。这是向我建议的解决方案，除了上面的警告之外，它比我发现的任何其他解决方案都更容易实施。

【讨论】：