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

回答

相關問題