[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

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


/app/ux/grid/DeletableRowEditor.js

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



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


Row Editing Grid 정의

<br/> Ext.define('WO.view.XxxxGrid', {<br/> extend: 'Ext.grid.Panel',<br/> <br/> ...<br/> <br/> initComponent: function() {<br/> <br/> this.selMode = 'rowmodel';<br/> <br/> this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', {<br/> clicksToEdit: 1<br/> })];<br/><br/> ...<br/> }<br/><br/> ...<br/><br/>});<br/>


Deletable Row Editing Grid 정의

- 리스너에 deleterow 이벤트 핸들러를 추가하여 수정 중인 행에 대한 record 인자로 받아 처리합니다.

(나중에 내공이 더 쌓이면 내부 기능으로 붙여버리는 것도 고려를... 으흠...)

<br/> Ext.define('WO.view.XxxxGrid', {<br/> extend: 'Ext.grid.Panel',<br/> requires: ['WO.ux.grid.plugin.DeletableRowEditing'],<br/> <br/> ...<br/> <br/> initComponent: function() {<br/> <br/> this.selMode = 'rowmodel';<br/> <br/> this.plugins = [Ext.create('WO.ux.grid.plugin.DeletableRowEditing', {<br/> this.plugins = [Ext.create('Ext.grid.plugin.RowEditing', {<br/> clicksToEdit: 1,<br/> listeners: {<br/> deleterow: function(record) {<br/> // do not something...<br/> }<br/> }<br/> })];<br/><br/> ...<br/> }<br/><br/> ...<br/><br/>});<br/>