Javascript ExtJS材质主题不工作

我使用的是ExtJS6.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" />

一切开始运作：

---

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

您不能在经典工具包应用程序上使用现代工具包主题。它们都有不同的组件和不同的配置属性

例如，在经典工具包中，我们有

Ext.window.window

组件。但是现代工具箱有

Ext.MessageBox

组件，该组件执行相同的任务。对于给定标签文本，我们在经典工具箱中使用

fieldLabel

，而在现代工具箱中使用

label

所以，modern toolkit主题将只包含modern kit支持的组件样式。它没有经典toolkit组件的样式。这就是您获得输出的原因。 为了获得相同的输出，两个工具包中的总体代码都有所不同。请参见下面在经典和现代工具包中设计的弹出示例

经典工具包弹出窗口

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();

现代工具包弹出窗口

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();

---

不能在经典工具包应用程序上使用现代工具包主题。它们都有不同的组件和不同的配置属性

例如，在经典工具包中，我们有

Ext.window.window

组件。但是现代工具箱有

Ext.MessageBox

组件，该组件执行相同的任务。对于给定标签文本，我们在经典工具箱中使用

fieldLabel

，而在现代工具箱中使用

label

所以，modern toolkit主题将只包含modern kit支持的组件样式。它没有经典toolkit组件的样式。这就是您获得输出的原因。 为了获得相同的输出，两个工具包中的总体代码都有所不同。请参见下面在经典和现代工具包中设计的弹出示例

经典工具包弹出窗口

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();

现代工具包弹出窗口

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();

---

所以您没有使用Sencha Cmd来构建应用程序？因为不同的主题设置完全不同。@pagep。我不使用。那么，将材料主题链接到项目的正确方式是什么？不使用Cmd。谢谢我总是使用引导和微加载。我不确定没有它的步骤是什么，我想你没有任何app.json可以设置主题？很明显，在您的案例中，材料CSS根本没有加载。假设应用程序是在经典中构建的，您无法将材料主题（现代主题）应用于经典应用程序。请将所有加载的CSS/文件的网络控制台，我们可以从中得到更好的想法。因为其他文件可能会覆盖css内容。所以您没有使用Sencha Cmd来构建应用程序？因为不同的主题设置完全不同。@pagep。我不使用。那么，将材料主题链接到项目的正确方式是什么？不使用Cmd。谢谢我总是使用引导和微加载。我不确定没有它的步骤是什么，我想你没有任何app.json可以设置主题？很明显，在您的案例中，材料CSS根本没有加载。假设应用程序是在经典中构建的，您无法将材料主题（现代主题）应用于经典应用程序。请将所有加载的CSS/文件的网络控制台，我们可以从中得到更好的想法。因为其他一些文件可能会覆盖css内容。经典工具箱主题：现代工具箱主题：经典工具箱主题：现代工具箱主题：