Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Динамическая замена Ext из комбобокса (https://javascript.ru/forum/extjs/62159-dinamicheskaya-zamena-ext-iz-komboboksa.html)

Moloch 27.03.2016 12:26

Динамическая замена Ext из комбобокса
 
Здравствуйте, подскажите пожалуйста как правильно реализовать смену Ext-темы из комбобокса? я сделал так:
function changeTheme(self) {

    var me = self? self :this;
    var theme_file = me.getValue();
    if (theme_file==="default") {
    	theme_file = '/theme-classic/resources/theme-classic-all.css'
    }
    Ext.util.CSS.swapStyleSheet('theme', 'ext/build/classic/' + theme_file);
    new Ext.util.Cookies.set('ext-theme', theme_file);

}

Ext.define('MyApp.view.main.myCombo', {
    xtype: 'myCombo',
    extend: 'Ext.form.Panel',
    title: 'Мой комбобокс',
    width: 500,
    layout: 'form',
    viewModel: {},
    frame: true,

    requires: [
        'MyApp.store.States',
    ],
    store: {
        type: 'mycombo'
    },
    items: [{
        xtype: 'fieldset',
        layout: 'anchor',
        items: [{
            xtype: 'component',
            anchor: '100%',
            html: [
                '<h3>Locally loaded data</h3>',
                '<p>This ComboBox uses local data from a JS array</p>'
            ]
        },  {
            xtype: 'combobox',
            reference: 'states',
            publishes: 'value',
            value: Ext.util.Cookies.get("ext-theme") || "default",
            fieldLabel: 'Выберите тему:',
            displayField: 'Title',
            valueField: 'fileName',
            listeners: {
                select: function(){
                    changeTheme(this);
                    location.reload();
                },
                load:function(box) {

                       changeTheme(this);
                   },
                beforerender:function(box) {

                       changeTheme(this);
                   }
            },
            anchor: '-15',
            store: {
                type: 'states'
            },
            minChars: 0,
            queryMode: 'local',
            typeAhead: true
        }]
    }]
});

Тема меняется, но стили предыдущей темы не удаляются, вследствие чего страдает внешний вид активной темы

nohuhu 28.03.2016 21:08

Такой подход скорее всего будет работать только между родственными темами, типа Classic/Gray или Neptune/Crisp. В этих парах основные размеры примерно одинаковы, отличаются они спрайтами и цветами.

Между Classic и Neptune разница не только в CSS, там ещё на стороне JavaScript есть куски кода, задающие разные параметры. С Triton всё ещё веселее, font icons вместо спрайтов.

Версия-то у вас какая?

Moloch 29.03.2016 10:29

Вот именно с кусками js-кода и спрайтами у меня проблемы. Особенно с тритоном, приходится частично править css-ки руками. Хотя на сайте
http://examples.sencha.com/extjs/6.0...p#locking-grid темы меняются корректно.
Версия ext: 6.0.1

nohuhu 29.03.2016 22:01

В KitchenSink темы меняются перезагрузкой страницы с подстановкой текущего #hash.

Динамическую смену темы _без_ перезагрузки страницы сделать возможно, но будет много возни с уничтожением дерева компонентов и пересозданием их заново. Я бы не рекомендовал в такие дебри залазить.

Оптимальный вариант: при выборе темы сохраняем текущее состояние приложения, перезагружаем страницу с нужно темой, восстанавливаем состояние.

Если вас такой подход устраивает, то всё просто - смотрите в KitchenSink за примером.

Moloch 31.03.2016 15:21

Примерно так и сделал


Часовой пояс GMT +3, время: 07:56.