创建ExtJS 6组件并设置其主题
我正在尝试为我的ExtJS应用程序创建一个自定义组件(使用ExtJS 6.0和modern toolkit) 我已经生成了一个新的应用程序,并添加了一个新的视图(扩展Ext.Component),在那里添加了一些逻辑。我可以用xtype创建这个组件,但是我被主题化卡住了 因此,问题是:如何正确地添加新组件(在框架源代码中/作为应用程序中的视图/其他地方),以及将组件的SAS放置在何处(生成自定义主题并将其插入其中/其他地方) 组件(位于app/view/components文件夹中): 增加: 我尝试过添加组件和主题的不同方法(目标是更改标准CSS和添加自定义) (对我来说)可以接受的方法是将自定义组件放入创建ExtJS 6组件并设置其主题,extjs,extjs6,extjs6-modern,Extjs,Extjs6,Extjs6 Modern,我正在尝试为我的ExtJS应用程序创建一个自定义组件(使用ExtJS 6.0和modern toolkit) 我已经生成了一个新的应用程序,并添加了一个新的视图(扩展Ext.Component),在那里添加了一些逻辑。我可以用xtype创建这个组件,但是我被主题化卡住了 因此,问题是:如何正确地添加新组件(在框架源代码中/作为应用程序中的视图/其他地方),以及将组件的SAS放置在何处(生成自定义主题并将其插入其中/其他地方) 组件(位于app/view/components文件夹中): 增加:
ux.button文件夹
(如@Alexander所述),并生成一个新主题。由于使用了两个(在我的例子中)不同的名称空间,因此需要清除themes package.json中的namespace参数。这提供了向src\MyAppNs\…\MyComponentClassName.scss
添加自定义样式的机会,还提供了为标准组件(即var\Ext\Component.scss
)添加或覆盖自定义样式的机会
也尝试使用workspace,但这种方式更适合在多个应用程序之间共享组件和主题。在这种情况下,组件可以作为包添加(第一种方式与主题类似)
最后,尝试将自定义组件添加到框架源代码中,但注意到SenchaCMD不支持这种方式。想想看,这是不可接受的。是否要在
Ext
或
下添加组件取决于您自己。您甚至可以为自定义组件库创建一个特殊的lib名称空间
我建议将组件命名为.ux.button.IconButton
.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放在哪里。谢谢您的回复。我用一些研究结果更新了这个问题。你的回答帮助了我。
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'
}
],
............