Overridden the RowEditorButtons:
Code:
Ext.grid.RowEditorButtons.override({
constructor: function (config) {
var me = this,
rowEditor = config.rowEditor,
cssPrefix = Ext.baseCSSPrefix,
plugin = rowEditor.editingPlugin;
config = Ext.apply({
baseCls: cssPrefix + 'grid-row-editor-buttons',
defaults: {
xtype: 'button',
ui: rowEditor.buttonUI,
scope: plugin,
flex: 1,
minWidth: Ext.panel.Panel.prototype.minButtonWidth
},
items: [{
cls: 'cancelTransaction',
text: 'Cancel Transaction',
iconCls: 'fa fa-minus-circle fa-lg',
handler: function(editor, context, eOpts) {
alert("cancel transaction");
}
}, {
cls: 'cancel',
iconCls: 'fa fa-times fa-lg',
handler: plugin.cancelEdit,
text: 'Cancel Changes'
}, {
cls: 'update',
iconCls: 'fa fa-save fa-lg',
itemId: 'update',
handler: plugin.completeEdit,
text: 'Save Changes'
}]
}, config);
Ext.grid.RowEditorButtons.superclass.constructor.call(this, config);
me.addClsWithUI(me.position);
}
});
and in the same file, I have this rowEditing plugin for listening to events:
Code:
Ext.define('com.xxx.roweditor.MyRowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.rowEditing',
clicksToMoveEditor: 2,
listeners: {
cancelEdit: function (editor, context, eOpts) {
// Canceling editing of a locally added, unsaved record: remove it
console.log("cancelling edit");
if (context.record.phantom) {
context.store.remove(context.record);
}
},
completeEdit: function (editor, context, eOpts) {
// saveTransaction(context.record);
}
}
});
and in my grid, I have referenced this custom plugin:
Code:
plugins: [{
ptype: 'rowEditing'
}
But, I have been told that this overrides the roweditor buttons for all the pages. I need different set of buttons in another pages.
And also have been told that we should never override the behaviour by overriding, we have to extend the plugin in-case we need the original implementation of plugin in some places.
So, I have copied some code from the sencha forums regarding extending rowEditing plugin: Here is my code:
// Custom RowEditor to have more buttons while rowediting
Code:
Ext.define('com.xxx.roweditor.MyRowEditor', {
extend: 'Ext.grid.RowEditor',
initComponent: function () {
this.callParent(arguments);
},
getFloatingButtons: function() {
var me = this,
cssPrefix = Ext.baseCSSPrefix,
btnsCss = cssPrefix + 'grid-row-editor-buttons',
plugin = me.editingPlugin,
minWidth = Ext.panel.Panel.prototype.minButtonWidth,
btns;
if (!me.floatingButtons) {
btns = me.floatingButtons = new 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>',
'{%this.renderContainer(out,values)%}'
],
flex: 1,
renderTo: me.el,
baseCls: btnsCss,
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
cls: 'cancelTransaction',
text: 'Cancel Transaction',
iconCls: 'fa fa-minus-circle fa-lg',
handler: function(editor, context, eOpts) {
alert("cancel transaction");
}
}, {
cls: 'cancel',
iconCls: 'fa fa-times fa-lg',
handler: plugin.cancelEdit,
text: 'Cancel Changes'
}, {
cls: 'update',
iconCls: 'fa fa-save fa-lg',
itemId: 'update',
handler: plugin.completeEdit,
text: 'Save Changes'
}]
});
// 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;
}
});
Code:
Ext.define('com.xxx.roweditor.MyRowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.rowEditing',
clicksToMoveEditor: 2,
initEditor: function () {
var me = this,
grid = me.grid,
view = me.view,
headerCt = grid.headerCt,
btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
b,
bLen = btns.length,
edcfg = {
autoCancel: me.autoCancel,
errorSummary: me.errorSummary,
fields: headerCt.getGridColumns(),
hidden: true,
view: view,
// keep a reference...
editingPlugin: me,
},
item;
//Turn button text into items
for (b = 0; b < bLen; b++) {
item = btns[b];
if (Ext.isDefined(me[item])) { //sometimes errorsText or dirtyText are not defined
edcfg[item] = me[item];
}
}
return Ext.create('com.xxx.roweditor.MyRowEditor', edcfg); ////This is really the only line you have to change
},
listeners: {
cancelEdit: function (editor, context, eOpts) {
// Canceling editing of a locally added, unsaved record: remove it
console.log("cancelling edit");
if (context.record.phantom) {
context.store.remove(context.record);
}
},
completeEdit: function (editor, context, eOpts) {
// saveTransaction(context.record);
}
}
});
I am getting the following error:
Uncaught TypeError: undefined is not a function RowEditor.js?_dc=1399581009976:846
Ext.define.syncButtonPosition RowEditor.js?_dc=1399581009976:846
Ext.define.reposition RowEditor.js?_dc=1399581009976:526
Ext.define.onShow RowEditor.js?_dc=1399581009976:939
Ext.define.show Component.js?_dc=1399581009976:5968
Ext.define.startEdit RowEditor.js?_dc=1399581009976:817
Ext.define.startEdit RowEditing.js?_dc=1399581009976:144
Ext.define.onCellClick Editing.js?_dc=1399581009976:442
fire Event.js?_dc=1399581009976:281
doFireEvent Observable.js?_dc=1399581009976:486
prototype.doFireEvent EventDomain.js?_dc=1399581009976:268
fireEventArgs Observable.js?_dc=1399581009976:457
fireEvent Observable.js?_dc=1399581009976:419
Ext.define.processItemEvent Table.js?_dc=1399581009976:1946
Ext.define.processUIEvent View.js?_dc=1399581009976:547
Ext.define.handleEvent View.js?_dc=1399581009976:495
Ext.define.doFire Controller.js?_dc=1399581009976:244
Ext.define.fire Controller.js?_dc=1399581009976:122
Ext.define.doDispatchEvent Dispatcher.js?_dc=1399581009976:482
Ext.define.dispatch Publisher.js?_dc=1399581009976:65
Ext.Base.Base.addMembers.callParent Base.js?_dc=1399581009976:1202
Ext.define.dispatch Dom.js?_dc=1399581009976:421
Ext.define.doPublish Dom.js?_dc=1399581009976:510
Ext.define.publish Dom.js?_dc=1399581009976:459
Ext.define.onDelegatedEvent Dom.js?_dc=1399581009976:593
(anonymous function)
Aucun commentaire:
Enregistrer un commentaire