// Custom RowEditor to have more buttons while rowediting
Ext.define('App.view.roweditor.TransactionRowEditor', {
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({
editor: me,
renderTpl: [
'<div class="{baseCls}-ml"></div>',
'<div class="{baseCls}-mr"></div>',
'<div class="{baseCls}-bl"></div>',
'<div class="{baseCls}-br"></div>',
//I had to add the style width for the buttons to show up
'<div class="{baseCls}-bc" style="width:450px"></div>',
'{%this.renderContainer(out,values)%}'
],
renderTo: me.body,
baseCls: btnsCss,
layout: {
type: 'hbox',
align: 'middle'
},
defaults: {
flex: 1,
margins: '0 1 0 1'
},
items: [{ //**I added my buttons here**//
xtype: 'button',
text: "Close",
handler: this.close,
scope: me,
tooltip: 'Close'
}, {
xtype: 'button',
handler: plugin.cancelEdit,
scope: plugin,
text: me.cancelBtnText,
minWidth: minWidth,
tooltip: 'Cancel changes'
}, {
xtype: 'button',
text: "MoreInfo",
handler: this.moreinfo,
scope: me,
tooltip: 'Click for more information'
}, {
itemId: 'update',
xtype: 'button',
handler: plugin.completeEdit,
scope: plugin,
text: 'Save',
minWidth: minWidth,
disabled: me.updateButtonDisabled,
tooltip: 'Save Transaction'
}]
});
}
return me.floatingButtons;
},
close: function () {
},
moreinfo: function () {
}
});
这是我用来添加更多按钮的rowediting插件。但是,按钮的渲染发生在我的容器的开头,并且该行不可编辑。你可以建议我可以在我开始编辑的那一行工作吗?
更新
我根据@JanS
的建议扩展了RowEditorButtonsExt.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: 'mybutton',
text: 'Cancel Transaction',
iconCls: 'fa fa-minus-circle fa-lg',
handler: function(editor, context, eOpts) {
console.log("stuff to do");
}
}, {
cls: 'mycancel',
iconCls: 'fa fa-times fa-lg',
handler: plugin.cancelEdit,
text: 'Cancel Changes'
}, {
cls: 'myupdate',
iconCls: 'fa fa-save fa-lg',
itemId: 'update',
handler: plugin.completeEdit,
text: 'Save Changes',
disabled: rowEditor.updateButtonDisabled
}]
}, config);
Ext.grid.RowEditorButtons.superclass.constructor.call(this, config);
me.addClsWithUI(me.position);
}
});
我已经读到它覆盖了整个项目。如果我只想要当前页面和另一个页面我想要不同的按钮组怎么办?