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

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

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

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

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

Modern-toolkit Popup

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

ExtJS材料主题不起作用

1 个答案: