Using a row editor in multiple widgets

[Allaris]

Hello,

I have a view that I have defined as a widget. It is a 2 column grid with a row editor. I have a viewport that contains 4 of these widgets. My problem is that regardless of which widget you try to edit, the row editor always popups up on the last (4th) widget.

By defining the row editor inside the view class, I thought each widget would get its own instance of the row editor but it seems I must have done something wrong. Is there anyone that can point me in the right direction? I need 4 panels - each identical, each independently editable, each will use the same store but with different parameters.

Here's my widget:

   Ext.define('FORECAST.view.MonthPanel', {
        extend: 'Ext.grid.Panel',
        alias : 'widget.bottomMonthData',         width : 320,
         height: 200,
         editor = Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
         });
         columns: [{
            text     : 'Customer',
            flex     : 1,
            sortable : true,
            dataIndex: 'custID'
        }, {
            text     : 'Amount',
            width    : 90,
            sortable : true,
            dataIndex: 'amount',
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }            
        }]
    });
    

Here's the panel that contains the 4 widgets:

Ext.define('FORECAST.view.BottomPanel' , {
    extend: 'Ext.panel.Panel',
    alias : 'widget.monthData',
 
    height : 245,
    frame  : true,
    layout : 'hbox',       
    padding: '20 0 0 40',
    layoutConfig : {                                                   
      pack : 'start'
    },
    items: [
          {         
                id: 'currentMonth',
           title  : month[curMonth.getMonth()] + ' Forcast',
             xtype: 'bottomMonthData',
             store: 'Month1',
             storeId:'month-1',
             columnLines: true
          },        
          {     
  id: 'month2',    
           title  : month[m1.getMonth()] + ' Forcast',
             xtype: 'bottomMonthData',
             store: 'Month2',
             storeId:'month-2',
             columnLines: true
          },
          {
  id: 'month3',
           title  : month[m2.getMonth()] + ' Forcast',
             xtype: 'bottomMonthData',
             store: 'Month3',
             storeId:'month-3',
             columnLines: true
          },
          {
  id: 'month4',
           title  : month[m3.getMonth()] + ' Forcast',
             xtype: 'bottomMonthData',
             store: 'Month4',
             storeId:'month-4',
             columnLines: true
     }]
});

[tobiu]

first: please use code tags, this makes it way easier to read your code, since it stays formatted.

i strongly recommend to only specify primitive configs directly in the prototype definition, since everything gets bound to the prototype.

if you use the initComponent instead like (untested):

initComponent: function() {
    Ext.apply(this, {
        editor : Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            autoCancel: false
        })
    });

    this.callParent(arguments);
}

you have one editor bound to each instance.