1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    Allaris is on a distinguished road

      0  

    Default Unanswered: Using a row editor in multiple widgets

    Unanswered: Using a row editor in multiple widgets


    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:

    Code:
       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
         }]
    });
    Last edited by tobiu; 28 Nov 2011 at 3:04 PM. Reason: code tags

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Answers
    130
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    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):
    Code:
    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.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

Thread Participants: 1

Tags for this Thread