Creating and theming ExtJS 6 component

Question

I`m trying to create a custom component for my ExtJS application (using extjs 6.0 and modern toolkit)

I`ve generated a new app and added a new View (extending Ext.Component), put some logic there. I am able to create this component with xtype but get stuck with theming.

So the question is: how to add a new component correctly (inside framework source / as a view in the app / somewhere else) and where to put sass for the component (generate a custom theme and insert it there / somewhere else)?

Component (located in app/view/components folder):

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'
    }
],
............

ADDED:

I have tried different methods of adding component and theme (the goal is to change standard CSS and add custom).

Acceptable way (for me) is to put the custom component into ux.button folder (as @Alexander mentioned) and to generate a new theme. Because of usage of two (in my case) different namespaces there is a need to clear namespace parameter in themes package.json. This gives an opportunity to add custom styles to src\MyAppNs\...\MyComponentClassName.scss and also add or override for standard components (i.e. var\Ext\Component.scss)

Also tried to use workspace, but this way is better for sharing components and themes between several applications. In this case component could be added as a package (like theme in the first way).

Finally, tried to add custom component to the framework source, but noticed that SenchaCMD does not support acting this way. Think, that it is not acceptable.

score 1 · Accepted Answer · answered Nov 26 '15 at 20:21

Whether you want to add the component under Ext or under <YourAppNamespace> is up to you. You could even create a special lib namespace for your custom component library.

I would recommend to name the component <Namespace>.ux.button.IconButton.

The styles for <YourAppNamespace>.ux.button.IconButton go into sass/src/ux/button/IconButton.sass, the styles for Ext.ux.button.IconButton into ext/modern/your-selected-theme/sass/src/ux/button/IconButton.sass.

I did not yet try to use a lib namespace and don't know where to put the CSS for that.

Thank you for reply. I have updated the question with some research results. Your answer helped me. — Andrew B, Nov 27 '15 at 10:56

Creating and theming ExtJS 6 component

1 Answers1