從本地網格刪除記錄

Question

我有一個Grid在Window。當我點擊該窗口的一行並單擊刪除按鈕時，該行應該從窗口中刪除。 （我想我必須remove it from Store and reload the grid, so the changes will be picked）

我無法獲得點擊事件並從商店中刪除該行。我爲此添加了按鈕，但無法獲取網格記錄並將其從商店中刪除並重新加載。

我的代碼如下;像

Ext.define('MyApp.view.Boy', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.boy', 
    height: 800, 
    width: 900, 
    layout: { 
     type: 'absolute' 
    }, 
    initComponent: function() { 
     var me = this; 
     Ext.applyIf(me, { 
      items: [ 
       { 
        xtype: 'gridpanel', 
        height: 500, 
        width: 800, 
        title: 'My Grid Panel', 
        store: 'School', 
        viewConfig: { 
        }, 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'Id', 
          text: 'id' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'name', 
          text: 'name' 
         } 
        ] 
       }, 
       { 
        xtype: 'button', 
        height: 40, 
        width: 150, 
        text: 'Remove', 
        listeners: { 
         click: { 
          fn: me.removebuttonclick, 
          scope: me 
         } 
        } 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    }, 
    removebuttonclick: function(button, e, options) { 
     console.log('removebuttonclick'); 
    } 
}); 

Answer 1

東西：

Ext.define('MyApp.view.Boy', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.boy', 
    height: 800, 
    width: 900, 
    layout: { 
     type: 'absolute' 
    }, 
    initComponent: function() { 
     var me = this; 
     var this.grid = Ext.widget({ 
        xtype: 'gridpanel', 
        height: 500, 
        width: 800, 
        title: 'My Grid Panel', 
        store: 'School', 
        viewConfig: { 
        }, 
        columns: [ 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'Id', 
          text: 'id' 
         }, 
         { 
          xtype: 'gridcolumn', 
          dataIndex: 'name', 
          text: 'name' 
         } 
        ] 
       }); 
     Ext.applyIf(me, { 
      items: [ 
       this.grid, //oopsie 
       { 
        xtype: 'button', 
        height: 40, 
        width: 150, 
        text: 'Remove', 
        listeners: { 
         click: { 
          fn: me.removebuttonclick, 
          scope: me 
         } 
        } 
       } 
      ] 
     }); 

     me.callParent(arguments); 
    }, 
    removebuttonclick: function(button, e, options) { 
    var me = this; 
    Ext.Array.each(this.grid.getSelectionModel().selected,function(record, index,selectedRows){ 
      me.grid.getStore().remove(record); 
     }); 
    } 
});