ExtJS 4 > Row Editor Grid > How to Change “Update” Button Text

Question

Is there any way to change the text of "Update" button in ExtJS-4 Row Editor Grid ?

Answer 1

Good question, I had a look through the source code and whilst there is nothing inside the RowEditing plugin, in the class it extends 'RowEditor.js' there is the following:

Ext.define('Ext.grid.RowEditor', {
    extend: 'Ext.form.Panel',
    requires: [
        'Ext.tip.ToolTip',
        'Ext.util.HashMap',
        'Ext.util.KeyNav'
    ],

    saveBtnText  : 'Update',
    cancelBtnText: 'Cancel',
    ...
});

So I'd assume you'd just need to override the 'saveBtnText' in your instance of 'Ext.grid.plugin.RowEditing' as it calls the parent constructor with callParent(arguments) in the RowEditing class

Answer 2

Not that easy and not without hacking in undocumented areas. The problem is, that the Ext.grid.plugin.RowEditing directly instantiates the Ext.grid.RowEditor without allowing you to pass in configuration options. So in general you have to override the initEditor() method in the plugin and instantiate your own row editor:

// ...
plugins: [{
    ptype: 'rowediting',
    clicksToEdit: 2,
    initEditor: function() {
        var me = this,
            grid = me.grid,
            view = me.view,
            headerCt = grid.headerCt;

        return Ext.create('Ext.grid.RowEditor', {
            autoCancel: me.autoCancel,
            errorSummary: me.errorSummary,
            fields: headerCt.getGridColumns(),
            hidden: true,

            // keep a reference..
            editingPlugin: me,
            renderTo: view.el,
            saveBtnText: 'This is my save button text', // <<---
            cancelBtnText: 'This is my cancel button text' // <<---
        });
    },
}],
// ...

Answer 3

For ExtJS 4

Ext.grid.RowEditor.prototype.cancelBtnText = "This is cancel";
Ext.grid.RowEditor.prototype.saveBtnText = "This is update";

Answer 4

This solution is to define the prototype of rowEditors. that means that this config is than general. If you want to change it just for one editor, or if you want to get different configs , the prototype is definitely not the solution.

look at source code :

initEditorConfig: function(){
        var me       = this,
            grid     = me.grid,
            view     = me.view,
            headerCt = grid.headerCt,
            btns     = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText'],
            b,
            bLen     = btns.length,
            cfg      = {
                autoCancel: me.autoCancel,
                errorSummary: me.errorSummary,
                fields: headerCt.getGridColumns(),
                hidden: true,
                view: view,
                // keep a reference..
                editingPlugin: me
            },
            item;
    for (b = 0; b < bLen; b++) {
        item = btns[b];

        if (Ext.isDefined(me[item])) {
            cfg[item] = me[item];
        }
    }
    return cfg;
}`

this method inits the rowEditor, and there's a loop on btns Array:

btns Array :

btns = ['saveBtnText', 'cancelBtnText', 'errorsText', 'dirtyText']    

for (b = 0; b < bLen; b++) {
        item = btns[b];

        if (Ext.isDefined(me[item])) {
            cfg[item] = me[item];
        }
    }

In this loop foreach string in btnArray it's searched if exists in cfg the same string property, if it's found it's added to config. You just have to manage that this loop finds what you want to modify:

Example: we want to change the text of save button:

the property saveBtnText which is the first item of btns Array must exists in cfg:

if (Ext.isDefined(me[item])) {
 cfg[item] = me[item];
}

this search if property exists : if (Ext.isDefined(me[item]))

if saveBtnText already exists in rowEditor properties then:

cfg[item] = me[item];

and the additional config property will be set!!