Javascript ext js将面板颜色更改为渐变色

我正在尝试更改第一个ExtJS6项目中所有项目的颜色。 最好是我想创建一些梯度的东西，如面板背景等

有人能告诉我如何做到这一点吗

我正在看这篇2009年的文章，但它只显示了单色，可能已经过时了，我不知道在我的项目中向css添加行到哪里

Two ways: 

First(Directly change in panel):
new Ext.Panel({
width:200,
height:200,
bodyStyle:{"background-color":"red"}, 
renderTo: document.body
});

Second(Add CSS class and use it in Panel's 'bodyCssClass' property): 
.x-panel-body{
background-color: blue}

谢谢

允许您设置CSS属性，如。这将应用于单个小部件

new Ext.Panel({
  width:200,
  height:200,
  bodyStyle:{'background-image': 'linear-gradient(red, orange);'}, 
  renderTo: document.body
});

如果希望它应用于所有面板，可以在Ext的CSS之后添加CSS

.x-panel-body{
  background-image: linear-gradient(red, orange);
}

如果要将其应用于一组面板，请添加

cls

config和匹配的CSS规则

.my-special-bg {
  background-image: linear-gradient(red, orange);
}

new Ext.Panel({
  width:200,
  height:200,
  cls: 'my-special-bg', 
  renderTo: document.body
});

允许您设置CSS属性，如。这将应用于单个小部件

new Ext.Panel({
  width:200,
  height:200,
  bodyStyle:{'background-image': 'linear-gradient(red, orange);'}, 
  renderTo: document.body
});

如果希望它应用于所有面板，可以在Ext的CSS之后添加CSS

.x-panel-body{
  background-image: linear-gradient(red, orange);
}

如果要将其应用于一组面板，请添加

cls

config和匹配的CSS规则

.my-special-bg {
  background-image: linear-gradient(red, orange);
}

new Ext.Panel({
  width:200,
  height:200,
  cls: 'my-special-bg', 
  renderTo: document.body
});

---

我相信如果你想

更改我的第一个ExtJS6项目中所有项目的颜色

实际上，为您的应用程序构建自定义主题并保留框架的优势（例如为旧浏览器预渲染图像）要好得多

---

检查这个。

我相信如果你想

更改我的第一个ExtJS6项目中所有项目的颜色

实际上，为您的应用程序构建自定义主题并保留框架的优势（例如为旧浏览器预渲染图像）要好得多

---

选中此项。

您声明要在Ext的CSS之后添加CSS，我添加到的文件具体在哪里？这个项目是一个标准的通用应用程序。你知道该文件在什么地方添加extjs6 universal上的CSS吗？我不知道你的意思，创建你自己的CSS文件custom-ext.CSS并从你的HTML链接到它。你声明在ext的CSS之后添加CSS，我添加到的那个文件到底在哪里？这个项目是一个标准的通用应用程序。你知道该文件在什么地方添加extjs6 universal上的CSS吗？我不知道你的意思，创建你自己的CSS文件，custom-ext.CSS，并从你的HTML链接到它。你可以，你不必，看我的答案好的，我不必，这只是更好的方式。因为它更简单、更可靠，并且允许您获得方法丢弃的框架的优点，例如，为旧浏览器预渲染的图像。另外，我不知道你为什么要比较你的方法和我的方法，它们都是有效的，我的目标是帮助作者，所以我介绍了另一种方法。。。。创建一个新文件夹/文件：“packages/local/my classic-theme/sass/var/Component.scss”。将以下代码添加到Component.scss文件：。我没有此文件夹……您知道它在通用应用程序上的位置吗？@solarissf，如果您正确构建自定义主题包（请阅读“生成自定义主题包和文件结构”）指南的一部分）路径与所写路径完全相同-“your_workspace/packages/local/my classic theme/sass/var/Component.scss”。此外，我还更新了指向ExtJS 6指南（而不是ExtJS 5）的链接，检查它，但实际上没有重大变化。是的，这是更好的方法，但不是更简单的方法，不是每个人都选择使用Sencha命令。你可以，你不必，看我的回答好的，我不必，这只是更好的方法。因为它更简单、更可靠，并且允许你获得方法抛出的框架的优势例如，传统浏览器的预渲染图像。此外，我不知道为什么您要比较您的方法和我的方法，它们都有效，我的目标是帮助作者，所以我介绍了另一种方法。我正在阅读ExtJS主题指南，它指出…。创建新文件夹/文件：“packages/local/my classic theme/sass/var/Component.scss”。将以下代码添加到Component.scss文件：。我没有此文件夹……您知道它在通用应用程序上的位置吗？@solarissf，如果您正确构建自定义主题包（请阅读指南的“生成自定义主题包和文件结构”部分）路径与所写路径完全相同-“your_workspace/packages/local/my classic theme/sass/var/Component.scss”。此外，我还更新了到ExtJS 6指南（而不是ExtJS 5）的链接，请检查它，但实际上没有重大更改。是的，这是更好的方法，但不是更简单的方法，不是每个人都选择使用Sencha命令