如何訪問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... 
}); 

乾杯，羅布

編輯：添加完整的例子： - 轉到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' 
     }] 
    }); 
});