Ext.container.Viewport中可拖拽Extjs Ext.grid.Panel

我想在Viewport中创建一个可拖动的网格，其中网格dd仅限于视口容器内。（最终，网格将位于标签面板内部，但是如果我可以得到这个更简单的示例，并且能够理解我可以从中获取它）。我可以将下面的网格面板放到窗口中，使可伸缩性远离框，然后这个窗口添加到视口，但Extjs4布局文档似乎警惕这一点：Ext.container.Viewport中可拖拽Extjs Ext.grid.Panel

“overnesting是一个常见的问题当GridPanel中被添加到的TabPanel发生overnesting的一个例子。将GridPanel包装在一个包装面板（没有指定布局）中，然后将该包装面板添加到TabPanel中。要实现的一点是GridPanel是一个可以直接添加到Container的组件。

- 注：数据和示例代码重从煎茶文档抬起 -

Ext.create('Ext.data.Store', { 
     storeId:'simpsonsStore', 
     fields:['name', 'email', 'phone'], 
     data:{'items':[ 
      { 'name': 'Lisa', "email":"[email protected]", "phone":"555-111-1224" }, 
      { 'name': 'Bart', "email":"[email protected]", "phone":"555-222-1234" }, 
      { 'name': 'Homer', "email":"[email protected]", "phone":"555-222-1244" }, 
      { 'name': 'Marge', "email":"[email protected]", "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警告），最好的方法是什么？

窗口源以一看，我可以添加以下代码上，DD，但这似乎并不适用于本案（即我创建一个默认的网格类继承我的组件）：

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？

来源

2012-04-09 inyourcorner

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

来源

2012-04-16 15:49:24 inyourcorner

Ext.container.Viewport中可拖拽Extjs Ext.grid.Panel

回答

相关问题