extjs 3.x стилизация панели вкладок - PullRequest
Новая
       4

extjs 3.x стилизация панели вкладок

1 голос
/ 03 января 2012

У меня есть вложенные панели вкладок, (внешние панели вкладок группируют внутренние вкладки), как внешняя панель - Контакты, а затем внутри нее у вас есть панель вкладок для каждого открытого элемента контакта, другая внешняя панель - Возможности, и в ней у вас есть панель вкладок для каждой открытой возможности.

Поначалу это сбивает с толку пользователей, поэтому я хотел бы добавить некоторые стили к панелям вкладок, чтобы пользователи могли различать и придавать значение внешним и внутренним вкладкам.

У меня был нулевой успех, когда я работал с tabPanel, как правильно это сделать? bodyCfg, tbar, tbarCls, baseClass ???? Я никогда не занимался стилизацией виджетов в ExtJS, и безуспешно борюсь за полдня.

Любые указатели на то, как работает стиль, особенно для TabPanels, приветствуются.

спасибо,

Hazim

1 Ответ

0 голосов
/ 03 января 2012

Я нахожу, что чаще всего вам нужно запачкать руки CSS, когда дело доходит до стилизации элементов управления ExtJS.

Это общая стратегия, которой я придерживаюсь, которая работает для меня до сих пор.

  1. вам нужен отладчик Chrome или аналогичный, который позволяет просматривать HTML и изменять стили CSS на лету.

  2. посмотрите на HTML для виджета в отладчике Chrome и вручную настраивайте стили, пока не найдете точный DOM-узел, который вам нужно стилизовать.

  3. Найдите переменную конфигурации в виджете, которая позволяет стилизовать тот узел, который вы нашли на шаге 2. Большинство переменных называются «xxxCls». Это требует опыта, нет короткого пути, например, что вы могли бы сделать, это установить "baseCls" и посмотреть на полученный HTML, чтобы увидеть, где в дереве DOM этот класс вставлен.

  4. довольно часто вы обнаружите, что нет доступной переменной конфигурации для стилизации нужной вам вещи (например, высота строки строки заголовка в большинстве панелей). В этом случае вам придется перезаписать CSS-класс ExtJS по умолчанию на желаемое значение. Применяется стандартная хорошая практика CSS.

...