как swtich темы extjs?

Question

Я заметил, что extjs поставляется с 3-4 темами по умолчанию / скинами.Как я могу выбрать или выбрать между темами?

Я хочу изменить синий цвет, чтобы выбрать серые темы или что-то еще.

Спасибо

Answer 1

Ext.util.CSS.swapStyleSheet функция может использоваться для переключения между различными темами, этот пост на форумах показывает пример.

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

Answer 2

Хотя Ext.util.CSS.swapStyleSheet будет работать, у него есть несколько недостатков:

1.Рендеринг страницы с новой темой CSS занимает больше времени.
2. При переключении между темами ваша страница некоторое время не будет работать.Это сделает страницу плохо выглядящей (разбитой и простой).
3. На экране появятся ненужные полосы прокрутки.

Я преодолел их, используя JavaScript:

Здесь,

1. Включите все файлы CSS в ваш HTML-файл.

   <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
   <link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />
   

2. Отключите все темы, кроме той, которую вы хотите по умолчанию.

   document.getElementById('theme1').disabled = true;
   document.getElementById('theme2').disabled = false;
   

   Теперь страница будет загружена с 'theme2'.

3. Если вы хотите переключить тему.Сделайте противоположное вышесказанному ...

   document.getElementById('theme1').disabled = false;
   document.getElementById('theme2').disabled = true;
   

Таким образом, переключение будет очень быстрым.Так как мы загрузили все файлы CSS изначально.Он не будет запрашивать у сервера новую тему каждый раз.

Это сработало очень хорошо для меня.