ExtJS扩展网格RowEditor插件（编辑数组）

我一直在使用ExtJS grid row editing plugin非常自由地用于Web应用程序中的CRUD操作。现在，我需要允许使用此行编辑插件将数据库记录与相关集合/数组（从另一个数据存储区）一起编辑。ExtJS扩展网格RowEditor插件（编辑数组）

要做到这一点，我想插入已选择进行编辑的行内的拖放网格，一个网格显示左侧的可用（未使用的）集合项目和另一个网格来容纳已定义的集合项目在右边。

为了说明什么，我试图做的，这里是正常的排编辑插件用选择要编辑的行：

grid with row editing

我试图做这里面（拖N - 降网格行编辑格）的：

grid with row editing plus another grid inside

要做到这一点，我一直在试图简单地运行像Ext.getCmp(???).add(myDnDGridPanel);，但我还没有发现这种连接到正确的事情（放什么在问号中）。

似乎足够合理的使用这个插件来编辑相关的集合/数组以及数据库记录。有谁知道一个简单的方法来添加项目到这个行编辑器div？

或者...我必须破解/扩展插件才能完成此操作吗？

来源

2012-01-10 Geronimo

收藏..嗯，我能想到的是，延长RowEditing并添加网格进去... – 2012-01-11 08:16:50

下面是示例RowEditing插件修改，它允许添加额外的组件。在这个演示中，这只是一个按钮，但它应该很容易定制。

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
    clicksToMoveEditor: 1, 
    autoCancel: false, 
    listeners: { 
     beforeedit: function(editor, e, eOpts) { 
      var body = this.editor.body; 
      var container = body.down('.container-for-extra-content'); 
      if (!container) { 
       container = Ext.core.DomHelper.insertAfter(body.last(), '<div class="container-for-extra-content"></div>', true); 
       container.setWidth(this.editor.body.getWidth(true)); 
       container.setHeight(this.extraHeight); 

       this.editor.getEl().setHeight(this.editor.getEl().getHeight() + this.extraHeight); 
       this.editor.body.setHeight(this.editor.body.getHeight() + this.extraHeight); 

       var panelConfig = { 
        renderTo: container, 
        items: [this.extraComponent] 
       }; 
       Ext.create('Ext.Panel', panelConfig); 
      } 
     }, 
     delay: 1 
    }, 
    extraHeight: 100, 
    extraComponent: { 
     xtype: 'panel', 
     items: [ 
      { xtype: 'button', text: 'Aloha!' } 
     ] 
    } 
});

这里是工作示例：http://jsfiddle.net/e2DzY/1/

来源

2012-01-11 10:55:34 Krzysztof

感谢洛洛，该做的伎俩。 – Geronimo 2012-01-11 16:58:51

谢谢洛洛......非常有帮助。 :) – 2013-02-14 00:21:17

ExtJS扩展网格RowEditor插件（编辑数组）

回答

相关问题