Ext.grid.plugin.RowEditingのupdateボタンとcancelボタンの順番を変える

GridのRowEditorでは、ボタンの並びは update, cancel の順となっています。
これを cancel, update の順に変更するには
Ext.grid.RowEditorButtons をオーバーライドすればよさそうです。

/overrides/grid/RowEditorButtons.js

Ext.define('MyApp.overrides.grid.RowEditorButtons', {
    override: 'Ext.grid.RowEditorButtons',

    initComponent: function(cfg) {
        var me = this;

        me.callParent();

        /**
         * updateボタンとcancelボタンの順番を入替え
         */
        me.items.reorder({0: 1, 1: 0});

        /**
         * updateボタンが目立つようにスタイリング
         */
        me.child('#update').setUI('default');
    }
});

(変更前)

こうなりました ↓

(変更後1)

順番は入れ替わりましたが、ボタンの間のスペースがなくなってしまっています。
これはスタイルが↓のように設定されているのが原因です。

/ext/classic/theme-neutral/sass/src/grid/plugin/RowEditing.scss

.#{$prefix}row-editor-update-button {
    margin-right: ceil($grid-row-editor-button-spacing / 2);
}
.#{$prefix}row-editor-cancel-button {
    margin-left: floor($grid-row-editor-button-spacing / 2);
}

なので、これも上書きするようにします。

RowEditorButtons.scss

/**
 * RowEditorのupdateボタンとcancelボタンの順番入替えに伴うスタイル変更
 */
.#{$prefix}row-editor-cancel-button {
    margin-right: ceil($grid-row-editor-button-spacing / 2);
    margin-left: auto;
}
.#{$prefix}row-editor-update-button {
    margin-left: floor($grid-row-editor-button-spacing / 2);
    margin-right: auto;
}

この RowEditorButtons.scss を 先程の RowEditorButtons.js と同じ場所か
{テーマディレクトリ}/sass/src/grid/ 下に置けばOKです。

最終的にはこうなりました ↓

(変更後2)

(Ext.MessageBoxのボタンの順番を変える方法は こちら を参照)