Динамическая замена 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 }] }] }); Тема меняется, но стили предыдущей темы не удаляются, вследствие чего страдает внешний вид активной темы |
Такой подход скорее всего будет работать только между родственными темами, типа Classic/Gray или Neptune/Crisp. В этих парах основные размеры примерно одинаковы, отличаются они спрайтами и цветами.
Между Classic и Neptune разница не только в CSS, там ещё на стороне JavaScript есть куски кода, задающие разные параметры. С Triton всё ещё веселее, font icons вместо спрайтов. Версия-то у вас какая? |
Вот именно с кусками js-кода и спрайтами у меня проблемы. Особенно с тритоном, приходится частично править css-ки руками. Хотя на сайте
http://examples.sencha.com/extjs/6.0...p#locking-grid темы меняются корректно. Версия ext: 6.0.1 |
В KitchenSink темы меняются перезагрузкой страницы с подстановкой текущего #hash.
Динамическую смену темы _без_ перезагрузки страницы сделать возможно, но будет много возни с уничтожением дерева компонентов и пересозданием их заново. Я бы не рекомендовал в такие дебри залазить. Оптимальный вариант: при выборе темы сохраняем текущее состояние приложения, перезагружаем страницу с нужно темой, восстанавливаем состояние. Если вас такой подход устраивает, то всё просто - смотрите в KitchenSink за примером. |
Примерно так и сделал
|
Часовой пояс GMT +3, время: 12:25. |