Edited at

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

More than 1 year has 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のボタンの順番を変える方法は こちら を参照)