[Ext JS 4.0] Grid - DeletableRowEditing

Ext JS 4.0 에서 제공해주는 "Row Editing Grid" 는 아래와 같이 Update 와 Cancel 버튼 밖에 없습니다.
(http://docs.sencha.com/ext-js/4-0/#!/example/grid/row-editing.html)

위의 기능에 Delete 버튼이 있으면 좋을 것 같아서 클래스를 확장해 보았습니다.

/app/ux/grid/plugin/DeletableRowEditing.js
Ext.define('WO.ux.grid.plugin.DeletableRowEditing', { extend: 'Ext.grid.plugin.RowEditing', alias: 'plugin.ux.deletablerowediting', initComponent: function() { this.addEvents({ deleterow: true }); this.callParent(arguments); }, // override initEditor: function() { var me = this, grid = me.grid, view = me.view, headerCt = grid.headerCt; return Ext.create('WO.ux.grid.DeletableRowEditor', { autoCancel: me.autoCancel, errorSummary: me.errorSummary, fields: headerCt.getGridColumns(), hidden: true, // keep a reference.. editingPlugin: me, renderTo: view.el }); }, deleteRow: function(record) { var me = this; me.getEditor().deleteRow(); me.fireEvent('deleterow', record); } });

/app/ux/grid/DeletableRowEditor.js
Ext.define('WO.ux.grid.DeletableRowEditor', { extend: 'Ext.grid.RowEditor', deleteBtnText: 'Delete', // override getFloatingButtons: function() { var me = this, cssPrefix = Ext.baseCSSPrefix, btnsCss = cssPrefix + 'grid-row-editor-buttons', plugin = me.editingPlugin, btns; if (!me.floatingButtons) { btns = me.floatingButtons = Ext.create('Ext.Container', { renderTpl: ['<div class="{baseCls}-ml"></div>', '<div class="{baseCls}-mr"></div>', '<div class="{baseCls}-bl"></div>', '<div class="{baseCls}-br"></div>', '<div class="{baseCls}-bc"></div>'], renderTo: me.el, baseCls: btnsCss, layout: { type: 'hbox', align: 'middle' }, defaults: { margins: '0 1 0 1' }, items: [{ itemId: 'update', flex: 1, xtype: 'button', handler: plugin.completeEdit, scope: plugin, text: me.saveBtnText, disabled: !me.isValid }, { flex: 1, xtype: 'button', handler: Ext.Function.pass(plugin.deleteRow, [me.context.record], plugin), scope: plugin, text: 'Delete' }, { flex: 1, xtype: 'button', handler: plugin.cancelEdit, scope: plugin, text: me.cancelBtnText }] }); // Prevent from bubbling click events to the grid view me.mon(btns.el, { // BrowserBug: Opera 11.01 // causes the view to scroll when a button is focused from mousedown mousedown: Ext.emptyFn, click: Ext.emptyFn, stopEvent: true }); } return me.floatingButtons; }, deleteRow: function(record) { var me = this; me.hide(); } });


위와 같이 Editing 클래스와 Editor 클래스를 확장한 후 그리드 패널에 위에서 생성한 플러그인으로 설정하면 됩니다.

Row Editing Grid 정의
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 })]; ... } ... });

Deletable Row Editing Grid 정의
- 리스너에 deleterow 이벤트 핸들러를 추가하여 수정 중인 행에 대한 record 인자로 받아 처리합니다.
(나중에 내공이 더 쌓이면 내부 기능으로 붙여버리는 것도 고려를... 으흠...)
Ext.define('WO.view.XxxxGrid', { extend: 'Ext.grid.Panel', requires: ['WO.ux.grid.plugin.DeletableRowEditing'], ... initComponent: function() { this.selMode = 'rowmodel'; this.plugins = [Ext.create('WO.ux.grid.plugin.DeletableRowEditing', { this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1, listeners: { deleterow: function(record) { // do not something... } } })]; ... } ... });