Изменить высоту вкладки ExtJS 4

Question

---

Контекст: Я пишу приложение ExtJS, чтобы помочь волонтерам управлять базой данных лагеря. Содержит информацию о чрезвычайных ситуациях, требования к питанию и размещение в салоне. Я хочу, чтобы он был удобным для пользователей, чтобы добровольцы могли его быстро поднять, поэтому я решил, что вкладки должны быть больше , чтобы привлечь внимание к основным действиям приложения. 1008 *

Проблема: Я просто не знаю, как изменить высоту вкладки.

Работа на данный момент:

• Я попытался установить свойство tabBar для моей панели вкладок, но размер вкладок не изменился, а стиль выглядел странно
• Я просматривал форумы, и люди предлагали изменить CSS, но примеров не было

---

Вы можете помочь? Вот чего я хочу достичь:

http://tinypic.com/r/sltr9g/7

http://postimage.org/image/10x22n8ec/

Answer 1

Я думаю, что нашел решение!

Убедитесь, что вы установили свойство 'cls' используемой Ext.tab.Panel, а затем вставьте следующее в свой пользовательский файл CSS.

.MainPanel .x-tab-bar-strip {
    top: 40px !important; /* Default value is 20, we add 20 = 40 */
}

.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important; /* Default value is 23, we add 20 = 43 */
    border: 0 !important; /* Overides the border that appears on resizing the grid */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 33px !important; /* Default value 13, we add 20 = 33 */
    line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}

Обратите внимание, что это увеличивает размер вкладок и выравнивает текст по центру, но в идеале значок также должен быть по центру .

Answer 2

Используя новые темы ExtJS 4 с Compass , вы можете просто установить:

$tab-height: 40px !default;

в appname/resources/sass/my-ext-theme.scss.

Единственная проблема, с которой вы столкнетесь, это дополнительное пространство под ошибкой панели вкладок , которая всегда появляется при использовании пользовательской темы. Но это может быть легко решено, как объяснено там, установив в одном из ваших CSS:

.x-tab-bar
{
    position: absolute;
}

В файле resources/themes/stylesheets/ext4/default/variables/_tabs.scss в пакете ExtJS вы можете найти другие полезные переменные для настройки размера и цвета вкладки.

Answer 3

Если вы используете extjs4, используйте SASS и Compass для внесения любых изменений в таблицу стилей extjs.

Вы можете просто добавить переменную ниже в my-custom-theme.scss, чтобыизменить высоту вкладки:

$tab-height: 40px;