Вход

Просмотр полной версии : Динамическая замена Ext из комбобокса


Moloch
27.03.2016, 12:26
Здравствуйте, подскажите пожалуйста как правильно реализовать смену 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.1/examples/kitchensink/?profile=crisp#locking-grid темы меняются корректно.
Версия ext: 6.0.1

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

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

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

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

Moloch
31.03.2016, 15:21
Примерно так и сделал