CODEWITHSUNDEEP
javascriptcssextjs
solarissf
solarissf

Reputation: 1277

ext js change color of panel to gradient

I am trying to change the colors of all the items in my first ExtJS6 project. Preferably I'd like to create some gradients for things such as panel backgrounds and the like.

Can someone please show me how to accomplish this?

I'm am looking at this post from 2009 but it just shows single colors, it might be outdated, and I don't know where to add lines to css in my project?

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}

thanks!

Upvotes: 0

Views: 738

Answers (2)

Sergey Novikov
Sergey Novikov

Reputation: 4196

I believe that if you want to

change the colors of all the items in my first ExtJS6 project

its actually much better to build custom theme for your application and keep the advantages of the framework, for example pre-rendered images for legacy browsers.

Check this ExtJS theming guide.

Upvotes: 3

Ruan Mendes
Ruan Mendes

Reputation: 92274

bodyStyle lets you set CSS properties like background-image. This will apply to a single widget.

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

If you want it to apply to all panels, you add the CSS after Ext's CSS

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

If you want it to apply to a set of panels, add a cls config and a matching CSS rule

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

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

Upvotes: 0

Related Questions