Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Корректировка темы (https://javascript.ru/forum/extjs/63157-korrektirovka-temy.html)

khusamov 20.05.2016 23:06

Корректировка темы
 
Никак не пойму как внедрить это CSS-правило:

Код:

.x-grid-cell-inner-row-numberer {
        padding: 7px 10px 6px;
}


nohuhu 21.05.2016 01:57

За эти значения отвечает переменная $grid-row-numberer-cell-padding. Не знаю, почему она не задокументирована, скорее всего просто забыли.

Правильный способ это поменять значение переменной в SASS. Совсем правильно было бы создать новую тему и задавать переменные в ней, но ради одной переменной можно и по-быстрому: создайте файл ${app.dir}/sass/var/Application.scss и добавьте в него строку:

$grid-row-numberer-cell-padding: <x>;


Имейте в виду, что переменная глобальная и padding изменится для всех таблиц с нумератором в вашем приложении. Если вам нужно изменить только одну таблицу, то к сожалению без хаков не обойтись. Нужно будет создать CSS правило с более высокой специфичностью, чем у стандартного. Для этого дайте нужному экземпляру Grid уникальный CSS класс и используйте его для правила:

JavaScript:
new Ext.grid.Panel({
    cls: 'my-specific-grid',
    ...
});

CSS:
.my-specific-grid .x-grid-cell-inner-row-numberer {
    padding: <x>;
}

khusamov 21.05.2016 18:25

Мне и нужно глобально. А переменной этой не обнаружил.

А если я сделаю две темы, можно между ними переключаться на ходу без перезагрузки HTML-страницы с приложением?

nohuhu 23.05.2016 20:37

Вложений: 2
Все переменные SASS можно найти, посмотрев исходники CSS правил в нужном файле .scss. Найти, в каком файле содержится правило, тоже довольно легко: в Chrome Dev tools выбираете нужный элемент, находите активное правило, которое определяет параметр под вопросом (скажем, padding), кликаете на ссылку рядом с селектором правила и Dev tools переходит к тому месту в файле CSS, где это правило содержится.

http://javascript.ru/forum/attachmen...d=146402478 7

А в комментарии над правилом указано, из какого файла SCSS оно прибыло:

http://javascript.ru/forum/attachmen...d=146402478 7

Переключение тем на лету теоретически возможно, но на практике довольно сложно сделать. Если у вас есть две темы совершенно одинаковые во всех параметрах, кроме цвета элементов и шрифтовых иконок, то можно попробовать подменять на ходу CSS файл. Если темы заметно разные, как например Classic и Neptune, то я бы не стал в такие дебри лезть.


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