ExtJS材料主题不起作用

Question

我正在使用ExtJS 6.2.1.我面临的问题是,材质主题打破了我的页面的整个布局,它只包含一个窗口小部件.这就是我在页面中包含材质主题的方法:

<link rel="stylesheet" href="/ext-6.2.1/build/modern/theme-material/resources/theme-material-all.css" type="text/css" />

这就是它的样子:

但是,如果我切换到triton主题,如下:

<link rel="stylesheet" href="/ext-6.2.1/build/classic/theme-triton/resources/theme-triton-all.css" type="text/css" />

一切都开始起作用了:

那么,这有什么问题,我该如何解决？

Answer 1

您不能在classic-toolkit应用程序上使用modern-toolkit主题.它们都具有不同的组件和不同的配置属性.

例如,在经典工具箱中,我们有Ext.window.Window组件.但是现代工具包具有Ext.MessageBox完成相同工作的组件.为了给出标签文本,我们fieldLabel在classic-toolkit中使用而label在现代工具包中使用.

因此,modern-toolkit主题将包含仅由modern-kit支持的组件样式.它没有classic-toolkit组件的样式.这就是你获得输出的原因.为了实现相同的输出,整个代码在两个工具包中都有所不同.请参阅下面的经典和现代工具包中设计的弹出示例.

Classic-toolkit Popup

Ext.create('Ext.window.Window', {
    title: 'Login',
width: 400,
    items:   [{
                    xtype: 'textfield',
                    fieldLabel: 'User Name',
                    width:'100%',
                },
                {
                    xtype: 'textfield',
                    width:'100%',
                    fieldLabel: 'Password',
                }],
                buttons:[{text:'Login'}]
}).show(); 

现代工具包弹出窗口

Ext.create('Ext.MessageBox', { // window changes to messagebox
    title: 'Login',
width: 400,
    items:   [{
                    xtype: 'textfield',
                    label: 'User Name', //fieldLabel changes to label
                    width:'100%',
                },
                {
                    xtype: 'textfield',
                    width:'100%',
                    label: 'Password',
                }],
                buttons:[{text:'Login'}]
}).show();