ExtJS 4 > 行编辑器网格 > 如何更改“更新”按钮文本答案

【问题标题】：ExtJS 4 > Row Editor Grid > How to Change "Update" Button TextExtJS 4 > 行编辑器网格 > 如何更改“更新”按钮文本
【发布时间】：2011-10-13 07:04:55
【问题描述】：

有什么方法可以改变 ExtJS-4 行编辑器网格中“更新”按钮的文本？

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

好问题，我查看了源代码，虽然 RowEditing 插件内部没有任何内容，但在它扩展的类中，'RowEditor.js' 有以下内容：

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

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

所以我假设您只需要覆盖 'Ext.grid.plugin.RowEditing' 实例中的 'saveBtnText'，因为它在 RowEditing 类中使用 callParent(arguments) 调用父构造函数

【讨论】：

【解决方案2】：

在未记录的区域进行黑客攻击并非易事。问题是，Ext.grid.plugin.RowEditing 直接实例化了Ext.grid.RowEditor，而不允许您传入配置选项。所以一般来说你必须重写插件中的initEditor()方法并实例化你自己的行编辑器：

// ...
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' // <<---
        });
    },
}],
// ...

【讨论】：

你检查你的代码了吗？ startEdit() 方法出错！ “未定义的 headerCt”。另一方面，上面的代码很适合编辑。要解决这个问题，请在 initComponent 上初始化插件，而不是通过延迟加载。
你可能是对的。我没有尝试启用自动加载的代码。

【解决方案3】：

对于 ExtJS 4

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

【讨论】：

【解决方案4】：

这个解决方案是定义rowEditors的原型。这意味着此配置比一般配置。如果你只想为一个编辑器改变它，或者你想得到不同的配置，原型肯定不是解决方案。

查看源代码：

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;
}`

这个方法初始化rowEditor，在btns Array上有一个循环：

btns 数组：

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

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

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

在这个循环中，在 btnArray 中的 foreach 字符串中，它会搜索 cfg 中是否存在相同的字符串属性，如果找到，则将其添加到配置中。你只需要管理这个循环找到你想要修改的内容：

示例：我们要更改保存按钮的文本：

cfg中必须存在btns数组第一项的属性saveBtnText：

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

如果属性存在则搜索：if (Ext.isDefined(me[item]))

如果 rowEditor 属性中已经存在 saveBtnText 则：

cfg[item] = me[item];

额外的配置属性将被设置！！

【讨论】：