创建和主题化 ExtJS 6 组件

Question

我正在尝试为我的 ExtJS 应用程序创建自定义组件（使用 extjs 6.0 和现代工具包）

我生成了一个新应用并添加了一个新视图（扩展 Ext.Component），并在其中添加了一些逻辑。我可以使用 xtype 创建此组件，但无法使用主题。

所以问题是：如何正确添加新组件（在框架源代码内/作为应用程序中的视图/其他地方）以及为组件放置 sass 的位置（生成自定义主题和将它插入那里/其他地方）？

组件（位于 app/view/components 文件夹中）：

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 中的 namespace 参数。这提供了向 src\MyAppNs\...\MyComponentClassName.scss 添加自定义样式以及添加或覆盖标准组件（即 var\Ext\Component.scss）

的机会

也尝试过使用workspace，但这种方式更适合在多个应用程序之间共享组件和主题。在这种情况下，组件可以作为一个包添加（如第一种方式的主题）。

最后，尝试将自定义组件添加到 框架源 ，但注意到 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 放在哪里。

创建和主题化 ExtJS 6 组件

Creating and theming ExtJS 6 component

extjs

extjs6

extjs6-modern