Extjs 4.2: Zeilenbearbeitung Breite Problem im Falle von mehreren Instanz von benutzerdefinierten Komponente

Question

Ich habe mehrere Instanzen meiner benutzerdefinierten XType (Raster). Einer von ihnen wurde in einer Ansicht bei der Kompilierung eingefügt aber andere sind in anderen Ansichten in afterrender Ereignisse dynamisch eingefügt wie:

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

Alles funktioniert gut. Probleme gibt es mit dem rowEditing-Plugin. Wenn ich Tab zu öffnen, in dem meine benutzerdefinierte Gitter vorhanden ist sieht es aus wie diese (richtige):

Aber wenn ich eine andere Registerkarte öffnen, die auch Instanz meiner benutzerdefinierten Grid enthält sieht es wie folgt aus:

Kann mir jemand sagen, dass was möglich Problem sein kann?

-Code für Zeile Bearbeitung Plugin ist einfach:

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

ich endlich in der Lage war, dieses Problem zu lösen. Ich weiß nicht, ob dies die einzige oder die beste Lösung ist, aber ich habe es gelöst, indem ich das Zeilenbearbeitungs-Plugin dynamisch in die verschiedenen Instanzen meines benutzerdefinierten Rasters eingefügt habe.

So nach dem dynamischen Einsetzen des Gitters eingefügt I die Zeilen Bearbeitung Plugins wie:

//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 

Fertig. Es hat für mich funktioniert. Wenn jemand noch eine bessere Lösung kennt, bitte posten.