Javascript 如何使用 ExtJS 设置样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5368903/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set styles using ExtJS
提问by Sarfraz
I wanted to change the styles like color, font size, background, etc of an elementor extJS widgetusing following code but none works:
我想使用以下代码更改元素或extJS 小部件的颜色、字体大小、背景等样式，但没有任何效果：
Ext.get('mydivid').setStyle({.......}); // does not work
Ext.get('mydivid').applyStyle({.......}); // does not work
Ext.select('mydivid').applyStyle({.......}); // does not work
Ext.query('.myclass').applyStyle({.......}); // does not work
And for extJs widget I tried using Ext.getCmp.
对于 extJs 小部件，我尝试使用Ext.getCmp.
Does anyone know how to change the styles of an html element and extJS widget using extJS and not CSS?
有谁知道如何使用 extJS 而不是 CSS 更改 html 元素和 extJS 小部件的样式？
回答by Stefan Gehrig
Changing the style of HTML DOM elements is quite easy:
更改 HTML DOM 元素的样式非常简单：
HTML
HTML
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="el1">Element 1</div>
<div class="el">Element [1]</div>
<div class="el">Element [2]</div>
</body>
</html>
Javascript
Javascript
Ext.onReady(function() {
Ext.get('el1').setStyle('color', 'red');
Ext.select('.el').setStyle('color', 'green');
});
Ext.querywill not work directly as it returns a simple array of found DOM nodes, so you'd have to loop over the result to apply styles. What did you do exactly?
Ext.query不会直接工作，因为它返回一个简单的 DOM 节点数组，因此您必须遍历结果以应用样式。你具体做了什么？
Styling widgets is not that easy unfortunately. Most widgets provide some styling attributes such as cls, ctCls, bodyClsor stylebut they are applied when rendering the component. To change the style of widgets after rendering you must change the widget's DOM elements directly using the methods above.
不幸的是，样式小部件并不是那么容易。最小部件提供一些造型属性，例如cls，ctCls，bodyCls或style但它们呈现组件当施加。要在渲染后更改小部件的样式，您必须使用上述方法直接更改小部件的 DOM 元素。
回答by Jan Mí?ek
There is typo error in your question:
你的问题有错别字：
it is not applyStyle but applyStyles.
它不是 applyStyle 而是 applyStyles。
applyStyles is method of Ext.Element, you can use it as follows:
applyStyles 是 Ext.Element 的方法，可以如下使用：
var win = new Ext.Window({
width: 200,
height: 200
});
win.show();
win.body.applyStyles({
'background-color':'red',
'border': '1px solid blue'
});
回答by jenson-button-event
The following is possible on the widget (but only before it is rendered, since the styleconfig property is applied during render):
在小部件上可以执行以下操作（但仅在渲染之前，因为style在渲染期间应用了config 属性）：
Ext.define('Ext.Component', {
style: {},
initComponent: function(config) {
this.callParent(config);
this.style['background-color'] = 'red';
}
});
This is useful if say you are acting on some specific value of some other config setting.
如果说您正在处理其他配置设置的某个特定值，这将很有用。
As pointed out once renderedyou have access to the setStyle() method of the encapsulated Ext.Element:
正如所指出的，一旦呈现，您就可以访问封装的 setStyle() 方法Ext.Element：
component.getEl().setStyle(config);
Finally you can go straight to the meat, and access the encapsulated DOM elementdirectly:
最后可以直接上肉，DOM element直接访问封装好的：
component.getEl().dom.style.backgroundColor = 'red';
