ExtJS предоставляет множество опций для стилизации компонентов.Каждое из этих свойств имеет свое место в реализации правильной тематики ваших компонентов.
cls : применяется к корневому элементу компонента.Цитирование из документов:
Необязательный дополнительный класс CSS, который будет добавлен к элементу этого компонента.Это может быть полезно для добавления пользовательских стилей к компоненту или любому из его дочерних элементов с использованием стандартных правил CSS.
По умолчанию это пустое значение.Если вам нужно стилизовать некоторые дочерние элементы (под элементами не подразумеваются компоненты ExtJs .. вместо этого, они являются HTML-элементами, автоматически генерируемыми платформой) компонента, вы можете использовать это.Например, если вы хотите изменить цвет фона внутренней области панели вкладок, вы можете сделать что-то вроде этого:
.customCss x-box-inner {
background-color: yellow;
}
componentCls : Это также применяется к корневому элементу компонента,Но это свойство предназначено для хранения стилей CSS для компонента в целом.Цитирование из документов:
Класс CSS, добавляемый к элементу корневого уровня компонентов, чтобы выделить его при помощи стиля.
С точки зрения результата, оба clsи componentCls применяется к корневому элементу.Но они используются для разных целей.
bodyCls : доступно для панелей.Вы не найдете этот стиль для кнопки, потому что нет тела.Если вы хотите предоставить пользовательские стили для области тела вашей панели ... вы можете сделать это, установив это свойство.