Question

我有自定义xtype（网格）的多个实例。其中一个在编译时插入到一个视图中，但其他视图在afterrender事件中动态插入其他视图中，如：

var cmp = Ext.getCmp('secondTab');
cmp.insert(cmp.items.length, {xtype: 'customGrid',  id:'customGrid2'});

一切都很好。问题在于rowEditing插件。当我打开我的自定义网格所在的标签时，它看起来像这样（正确的）：

但是，当我打开其他包含我的自定义Grid实例的标签时，它看起来像这样：

有人能告诉我可能出现的问题吗？

行编辑插件的代码很简单：

plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
        pluginId: 'rowEditing',
        autoCancel: false,

        // Preventing editing mode by click on any cell
        onCellClick: function ( view, cell, colIdx, record, row, rowIdx, e){} ,
        startEditByClick: function (){},
        onEnterKey: function (){},

        // Listening various event of plugin
        listeners: {

            /**
             * @event edit
             * Fires after a editing
             * Calling respective controller method.
             * @param {Ext.grid.plugin.Editing} editor
             */
            edit: function(editor, e) {
                // I am calling my controller method here to add a new record in this grid code is  pasted here

                var store = Ext.getStore('teilgewerke_store_neu');
                var r = Ext.create('MyApp.model.MyModel',{'name': "", 'date':"", 'text' : ""});
                store.proxy.url = "someUrl";
                var result = store.add(r);

                var rowEditingPlugin = Ext.getCmp(this.viewParentId).getPlugin('rowEditing');

                rowEditingPlugin.startEdit(r);

            },

            /**
             * @event canceledit
             * Fires when the user started editing but then cancelled the edit. Enable the Hinzufaugen Button and reload the grid.
             * @param {Ext.grid.plugin.Editing} editor
             */
            canceledit: function(editor, context, eOpt){

                //My own logic to enable disable stuff
            }
        }
    })
]

Answer 1

我终于能够解决这个问题了。我不知道这是唯一的还是最好的解决方案，但我通过动态地将行编辑插件插入到我的自定义网格的各种实例中来解决它。

因此，在动态插入Grid之后，我插入了行编辑插件，如：

//code for row editing plugin given in my question but just for sample
var plugin = Ext.create('Ext.grid.plugin.RowEditing', {

        onCellClick: function ( view, cell, colIdx, record, row, rowIdx, e){} ,
        startEditByClick: function (){},
        onEnterKey: function (){},

        listeners: {
            edit: function(editor, e) {
                //Whatever you want to do
            }
        }
    })

var myGrid = Ext.getCmp('instanceOfMyCustomGrid');
plugin.init(myGrid); //This is important while dynamically inserting plugin
myGrid.plugins = []; // If there is no other plugin for your grid, create an empty plugin array
myGrid.plugins[0] = plugin; //Insert your plugin

那就是它。它对我有用。如果有人仍然知道更好的解决方案，请发帖。

Extjs 4.2：自定义组件的多个实例

1 个答案: