ExtJS 扩展网格 RowEditor 插件(编辑数组) [英] ExtJS extend grid RowEditor plugin (to edit array)

问题描述

我一直在使用 >

I've been using the ExtJS grid row editing plugin pretty liberally for CRUD operations in web applications. Now, I have a requirement to allow a database record to be edited along with a related collection/array (from another datastore) using this row editing plugin.

To do this I want to insert drag-n-drop grids inside of a row that has been selected for editing, one grid showing the available (unused) collection items on the left and another grid to hold the defined collection items on the right.

To illustrate what I am trying to do, here is the normal row editing plugin with a row selected for editing:

I am trying to do this (drag-n-drop grids inside of row editor div):

To do this I have been trying to simply run something like Ext.getCmp(???).add(myDnDGridPanel); but I haven't found the right thing to attach this to (what to put in the question marks).

It seems reasonable enough to use this plugin to edit the related collection/array along with the database record. Does anyone know a simple way to add items to this row editor div?

Or... will I have to hack/extend the plugin to accomplish this?

解决方案

Below is example RowEditing plugin modification which allows to add additional components. In this demo this is only a button, but it should be easy to customize.

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!' }
        ]
    }
});

Here is working sample: http://jsfiddle.net/e2DzY/1/

这篇关于ExtJS 扩展网格 RowEditor 插件(编辑数组)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！