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

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

"过度嵌套是一个常见问题。通过将 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

是否有我不知道的混音，

或者如果没有，从上面的代码创建一个混音是否合适？

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

相关内容

最新更新

热门标签：