Question

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

＆＃34; 过度使用是一个常见问题。通过将GridPanel包装在包装面板内（没有指定布局）将GridPanel添加到TabPanel时，会发生过度处理的示例）然后将包装面板添加到TabPanel。需要注意的是，GridPanel是一个可以直接添加到Container的组件。＆＃34;

- 注意：数据和示例代码严重脱离了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？

Answer 1

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

Ext.container.Viewport中的Draggable Extjs Ext.grid.Panel

1 个答案: