Создание и Темизация ExtJS 6 компонент

Question

I`m пытается создать пользовательский компонент для моего приложения ExtJS (с использованием ExtJS 6.0 и современный инструментарий)

I`ve генерируется новое приложение и добавлен новый вид (простирающуюся Ext. Компонент), добавьте некоторую логику. Я могу создать этот компонент с помощью xtype, но застрял в тематике.

Итак, вопрос заключается в следующем: как правильно добавить новый компонент (внутри исходного кода/в виде приложения в приложении/где-то еще) и куда поместить sass для компонента (создать пользовательскую тему и вставить туда/где-то еще)?

Компонент (находится в папке/приложение просмотра/компонентов):

Ext.define("WebTest.view.components.IconButton", { 
extend: 'Ext.Component', 
xtype: 'iconbutton', 

cachedConfig: { 
    pressedCls: Ext.baseCSSPrefix + 'iconbutton-pressing', 
    iconCls: null 
}, 

config: { 
    handler: null, 
    scope: null, 
    baseCls: Ext.baseCSSPrefix + 'iconbutton' + ' ' + Ext.baseCSSPrefix + 'iconalign-center' 
}, 

template: [ 
    { 
     tag: 'span', 
     className: Ext.baseCSSPrefix + 'iconbutton-icon', 
     reference: 'iconElement' 
    } 
], 
............ 

ДОБАВЛЕНО:

Я пробовал различные методы добавления компонента и темы (цель изменить стандартный CSS и добавлять пользовательские).

Приемлемый способ (для меня), чтобы поместить пользовательский компонент в ux.button folder (как уже упоминалось @Alexander) и генерировать новую тему . Из-за использования двух (в моем случае) разных пространств имен необходимо очистить пространство имен параметр в темах package.json. Это дает возможность добавлять пользовательские стили src\MyAppNs\...\MyComponentClassName.scss, а также добавлять или переопределять для стандартных компонентов (т.е. var\Ext\Component.scss)

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

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

Answer 1

Если вы хотите добавить компонент под Ext или под <YourAppNamespace> зависит от вас. Вы даже можете создать специальное пространство имен lib для своей пользовательской библиотеки компонентов.

Я бы рекомендовал назвать компонент <Namespace>.ux.button.IconButton.

Стили для <YourAppNamespace>.ux.button.IconButton перейдите в sass/src/ux/button/IconButton.sass, стили для Ext.ux.button.IconButton в ext/modern/your-selected-theme/sass/src/ux/button/IconButton.sass.

Я еще не пытался использовать пространство имен lib и не знаю, где разместить CSS для этого.