Как подключиться к плагину в ExtJs MVC

Question

Я пытаюсь добавить панель инструментов в свою сетку с помощью кнопки «Добавить новую запись».

Пример кода предоставляется Сенча здесь:

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', { 
     clicksToMoveEditor: 1, 
     autoCancel: false 
    }); 

    // create the grid and specify what field you want 
    // to use for the editor at each column. 
    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     tbar: [{ 
      text: 'Add Employee', 
      iconCls: 'employee-add', 
      handler : function() { 
       rowEditing.cancelEdit(); 

       // Create a model instance 
       var r = Ext.create('Employee', { 
        name: 'New Guy', 
        email: 'new@sencha-test.com', 
        start: new Date(), 
        salary: 50000, 
        active: true 
       }); 

       store.insert(0, r); 
       rowEditing.startEdit(0, 0); 
      } 
     }], 
     //etc... 
    }); 

Пример: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/grid/row-editing.html

У меня возникают проблемы, применяя это мой код, поскольку я использую шаблон MVC. Это мой код:

Ext.define('RateManagement.view.Grids.AirShipmentGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'AirShipmentGrid', 
    plugins: [ 
     { 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      ptype: 'rowediting' 
     }, 
     'bufferedrenderer' 
    ], 
    tbar: [{ 
      text: 'Add Rate', 
      //iconCls: 'rate-add', 
      handler : function() { 
       rowEditing.cancelEdit(); // rowEditing is not defined... 

       // Create a model instance 
       var r = Ext.create('Employee', { 
        name: 'New Guy', 
        email: 'new@sencha-test.com', 
        start: new Date(), 
        salary: 50000, 
        active: true 
       }); 

       store.insert(0, r); 
       rowEditing.startEdit(0, 0); // rowEditing is not defined... 
      } 
     }], 
    // etc... 
}); 

Как я могу получить доступ к «RowEditing» плагин для того, чтобы назвать это необходимые методы?

Answer 1

обработчик с кнопок получает ссылку на кнопку в качестве первого аргумента. Вы можете использовать эту ссылку с помощью компонента, чтобы получить ссылку на панель сетки, в которой она находится. В gridPanel есть метод getPlugin, с помощью которого вы можете получить плагин на основе pluginId. Единственное, что вам нужно сделать, это предоставить плагину pluginId, иначе Grid не сможет его найти. Это должно работать:

Ext.define('RateManagement.view.Grids.AirShipmentGrid', { 
    extend: 'Ext.grid.Panel', 
    xtype: 'AirShipmentGrid', 
    plugins: [ 
     { 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      ptype: 'rowediting', 
      pluginId: 'rowediting' 
     }, 
     'bufferedrenderer' 
    ], 
    tbar: [{ 
      text: 'Add Rate', 
      //iconCls: 'rate-add', 
      handler : function(button) { 
       var grid = button.up('gridpanel'); 
       var rowEditing = grid.getPlugin('rowediting'); 
       rowEditing.cancelEdit(); // rowEditing is now defined... :) 

       // Create a model instance 
       var r = Ext.create('Employee', { 
        name: 'New Guy', 
        email: 'new@sencha-test.com', 
        start: new Date(), 
        salary: 50000, 
        active: true 
       }); 

       store.insert(0, r); 
       rowEditing.startEdit(0, 0); // rowEditing is not defined... 
      } 
     }], 
    // etc... 
}); 

Cheers, Rob

EDIT: добавлен полный пример: - Перейти к http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/grid/row-editing.html - Откройте консоль JavaScript - Вставьте следующий код там

Это создаст вторая сетка с кнопкой, которая находит плагин редактирования строк и отменяет ваше редактирование. дважды щелкните строку, чтобы начать редактирование, нажмите кнопку на панели, чтобы отменить ее. Работает как шарм. Убедитесь, что вы указали pluginId, иначе метод getPlugin не сможет найти его.

Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.state.*', 
    'Ext.form.*' 
]); 

Ext.onReady(function() { 
    // Define our data model 
    Ext.define('Employee', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      'name', 
      'email', { 
       name: 'start', 
       type: 'date', 
       dateFormat: 'n/j/Y' 
      }, { 
       name: 'salary', 
       type: 'float' 
      }, { 
       name: 'active', 
       type: 'bool' 
      } 
     ] 
    }); 

    // Generate mock employee data 
    var data = (function() { 
     var lasts = ['Jones', 'Smith', 'Lee', 'Wilson', 'Black', 'Williams', 'Lewis', 'Johnson', 'Foot', 'Little', 'Vee', 'Train', 'Hot', 'Mutt'], 
      firsts = ['Fred', 'Julie', 'Bill', 'Ted', 'Jack', 'John', 'Mark', 'Mike', 'Chris', 'Bob', 'Travis', 'Kelly', 'Sara'], 
      lastLen = lasts.length, 
      firstLen = firsts.length, 
      usedNames = {}, 
      data = [], 
      s = new Date(2007, 0, 1), 
      eDate = Ext.Date, 
      now = new Date(), 
      getRandomInt = Ext.Number.randomInt, 

      generateName = function() { 
       var name = firsts[getRandomInt(0, firstLen - 1)] + ' ' + lasts[getRandomInt(0, lastLen - 1)]; 
       if (usedNames[name]) { 
        return generateName(); 
       } 
       usedNames[name] = true; 
       return name; 
      }; 

     while (s.getTime() < now.getTime()) { 
      var ecount = getRandomInt(0, 3); 
      for (var i = 0; i < ecount; i++) { 
       var name = generateName(); 
       data.push({ 
        start: eDate.add(eDate.clearTime(s, true), eDate.DAY, getRandomInt(0, 27)), 
        name: name, 
        email: name.toLowerCase().replace(' ', '.') + '@sencha-test.com', 
        active: getRandomInt(0, 1), 
        salary: Math.floor(getRandomInt(35000, 85000)/1000) * 1000 
       }); 
      } 
      s = eDate.add(s, eDate.MONTH, 1); 
     } 

     return data; 
    })(); 

    // create the Data Store 
    var store = Ext.create('Ext.data.Store', { 
     // destroy the store if the grid is destroyed 
     autoDestroy: true, 
     model: 'Employee', 
     proxy: { 
      type: 'memory' 
     }, 
     data: data, 
     sorters: [{ 
      property: 'start', 
      direction: 'ASC' 
     }] 
    }); 

    // create the grid and specify what field you want 
    // to use for the editor at each column. 
    var grid = Ext.create('Ext.grid.Panel', { 
     store: store, 
     columns: [{ 
      header: 'Name', 
      dataIndex: 'name', 
      flex: 1, 
      editor: { 
       // defaults to textfield if no xtype is supplied 
       allowBlank: false 
      } 
     }, { 
      header: 'Email', 
      dataIndex: 'email', 
      width: 160, 
      editor: { 
       allowBlank: false, 
       vtype: 'email' 
      } 
     }, { 
      xtype: 'datecolumn', 
      header: 'Start Date', 
      dataIndex: 'start', 
      width: 105, 
      editor: { 
       xtype: 'datefield', 
       allowBlank: false, 
       format: 'm/d/Y', 
       minValue: '01/01/2006', 
       minText: 'Cannot have a start date before the company existed!', 
       maxValue: Ext.Date.format(new Date(), 'm/d/Y') 
      } 
     }, { 
      xtype: 'numbercolumn', 
      header: 'Salary', 
      dataIndex: 'salary', 
      format: '$0,0', 
      width: 90, 
      editor: { 
       xtype: 'numberfield', 
       allowBlank: false, 
       minValue: 1, 
       maxValue: 150000 
      } 
     }, { 
      xtype: 'checkcolumn', 
      header: 'Active?', 
      dataIndex: 'active', 
      width: 60, 
      editor: { 
       xtype: 'checkbox', 
       cls: 'x-grid-checkheader-editor' 
      } 
     }], 
     renderTo: 'editor-grid', 
     width: 600, 
     height: 400, 
     title: 'Employee Salaries', 
     frame: true, 
     tbar: [{ 
      text: 'Cancel editing Plugin', 
      handler: function(button) { 
       var myGrid = button.up('grid'); 
       var myPlugin = myGrid.getPlugin('rowediting') 

       myPlugin.cancelEdit(); 
       console.log(myPlugin); 
      } 
     }], 
     plugins: [{ 
      clicksToMoveEditor: 1, 
      autoCancel: false, 
      ptype: 'rowediting', 
      pluginId: 'rowediting' 
     }] 
    }); 
});