Ext.grid.plugin.RowEditing의 업데이트 단추와 cancel 단추의 순서를 변경합니다

5361 단어 ExtJSSencha
Grid의 RowEditor에서 단추의 배열 순서는 업데이트, cancel입니다.
cancel, 업데이트 순서 바꾸기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;
}
이 RowEditorButonsscss를 아까 RowEditorButons로 바꿔 주세요.js와 같은 곳에 있습니까
{테마 디렉터리]/sass/src/grid/아래에 놓으면 됩니다.
결국이렇게↓
(수정 후 2)

(Ext.MessageBox의 버튼 순서를 변경하는 방법 참조여기.

좋은 웹페이지 즐겨찾기