Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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');
    }
});

(変更前)
ボタンがupdate,cancelの順のキャプチャ

こうなりました ↓

(変更後1)
ボタンがcancel,updateの順だがボタン間のスペースがなくなっているキャプチャ

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

/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)
image.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away