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

Question

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

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

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

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

спасибо,

Hazim

Answer 1

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

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

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

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

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

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