Question

我正在尝试更改第一个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}

谢谢！

Answer 1

我相信如果你想

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

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

选中ExtJS theming guide。

Answer 2

bodyStyle可让您设置background-image等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配置和匹配的CSS规则

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

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

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

2 个答案: