ExtJS Lưới Xóa Row - Bắt chọn Row

Question

Tôi nhận được lỗi sau khi cố gắng để có được hàng đã chọn:

Uncaught TypeError: Object #<HTMLDivElement> has no method 'getView' 

Làm thế nào để có được hàng đã chọn hiện tại khi tôi không thể nhận được Xem và do đó SelectionModel?

Xem My Code:

Ext.define('MyLodge.view.content.MemberGrid', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.membergrid', 



initComponent: function(){ 

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing'); 

    var store = Ext.create('MyLodge.store.Members'); 

    Ext.apply(this, { 
     height: this.height, 
     plugins: [rowEditing], 
     store: store, 
     stripeRows: true, 
     columnLines: true, 
     columns: [{ 
      id  :'id', 
      text: 'ID', 
      width: 40, 
      sortable: true, 
      dataIndex: 'id' 
     },{ 
      text : 'Name', 
      flex: 1, 
      sortable : true, 
      dataIndex: 'name', 
      field: { 
       xtype: 'textfield' 
      } 
     },{ 
      text : 'E-Mail', 
      width : 150, 
      sortable : true, 
      dataIndex: 'email', 
      field: { 
       xtype: 'textfield' 
      } 
     },{ 
      text : 'Href', 
      width : 200, 
      editable: false, 
      sortable : true, 
      dataIndex: 'href' 
     }], 
     dockedItems: [{ 
      xtype: 'toolbar', 
      items: [{ 
       text: 'Add', 
       iconCls: 'icon-add', 
       handler: function(){ 
        // empty record 
        store.insert(0, new MyLodge.model.Member()); 
        rowEditing.startEdit(0, 0); 
       } 
      }, { 
       text: 'Delete', 
       iconCls: 'icon-delete', 
       handler: function(){ 
        var selection = grid.getView().getSelectionModel().getSelection()[0]; 
        if (selection) { 
         store.remove(selection); 
        } 
       } 
      },'-',{ 
       text: 'Save', 
       iconCls: 'icon-save', 
       handler: function(){ 
        store.sync({ 
         success: function(response){ 
          store.load() 
         } 
        }); 

       } 
      },{ 
       text: 'Refresh', 
       handler: function(){ 
        store.load(); 
       } 
      }] 
     }] 
    }); 

    this.callParent(arguments); 
    } 
}); 

Answer 1

Một lựa chọn sẽ được thêm scope đến việc đóng cửa như là một biến:

initComponent: function() { 
    var me = this; 
    . 
    . 

Vì vậy, trong trình xử lý, bạn có thể sử dụng me để tham khảo lưới:

{ 
    text: 'Delete', 
    iconCls: 'icon - delete ', 
    handler: function() { 
     var selection = me.getView().getSelectionModel().getSelection()[0]; 
     if (selection) { 
      store.remove(selection); 
     } 
    } 
} 

dụ làm việc:http://jsfiddle.net/Sn4fC/

---

Một lựa chọn thứ hai có thể được thiết lập một clicklistener thay vì handler và xác định scope: ví dụ

{ 
    text: 'Delete', 
    iconCls: 'icon - delete ', 
    listeners: { 
     click: { 
      scope: this, 
      fn: function() { 
       var selection = this.getView().getSelectionModel().getSelection()[0]; 
       if (selection) { 
        store.remove(selection); 
       } 
      } 
     } 
    } 
} 

làm việc:http://jsfiddle.net/XyBbF/

Answer 2

Vấn đề là 'lưới' không có sẵn trong phạm vi chức năng xử lý hoặc nó không phải là một trong những gì bạn thực sự mong đợi nó được.

handler: function(){ 
     //.... keep the debug point here in browser developer tool and verify the value of grid in console. It is definitely not an instance of the grid u expected hence it wont have getView() method. 
     var selection = grid.getView().getSelectionModel().getSelection()[0]; 

} 

Hãy thử lấy các tài liệu tham khảo của lưới điện và sử dụng nó trong xử lý như hình dưới đây:

Ext.define('MyLodge.view.content.MemberGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.membergrid', 
    id: 'membergrid', 
    ...... 

handler: function(){ 
    var grid = Ext.getCmp('membergrid'); // where 'membergrid' is the id defined in grid config 
    var selection = grid.getView()......