如何使用ExtJS设置样式

Question

如何使用ExtJS设置样式

25

我想通过以下代码更改一个元素或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

对于 extJS 小部件，我尝试使用 Ext.getCmp.

有人知道如何使用 extJS 而不是 CSS 来更改 HTML 元素和 extJS 小部件的样式吗？

- Sarfraz

3个回答

7

您的问题中有拼写错误：

它不是applyStyle，而是applyStyles。

applyStyles是Ext.Element的方法，您可以按以下方式使用它：

var win = new Ext.Window({
      width: 200, 
      height: 200
});
win.show();

win.body.applyStyles({ 
  'background-color':'red',
  'border': '1px solid blue'
});

- Jan Míšek

4

以下操作仅在小部件渲染之前可能（因为“style”配置属性在渲染期间应用）：

Ext.define('Ext.Component', {
  style: {},
  initComponent: function(config) {
    this.callParent(config);
    this.style['background-color'] = 'red';
  }
});

如果你需要针对某些其他配置设置的特定值进行操作，则这很有用。

正如所指出的在渲染之后，你可以访问封装的Ext.Element的setStyle()方法：

component.getEl().setStyle(config);

最后，您可以直接访问封装的 DOM 元素：

component.getEl().dom.style.backgroundColor = 'red';

- jenson-button-event

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stefan Gehrig · Accepted Answer

改变HTML DOM元素的样式非常简单：

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

Ext.onReady(function() {
    Ext.get('el1').setStyle('color', 'red');
    Ext.select('.el').setStyle('color', 'green');
});

Ext.query 直接使用无法生效，它只返回找到的 DOM 节点的简单数组，因此您需要循环遍历结果来应用样式。你具体是怎么做的呢？

不幸的是，样式化组件并不那么容易。大多数部件提供一些样式属性，例如 cls、ctCls、bodyCls 或 style，但这些属性在渲染组件时就已经应用了。要在渲染后更改窗口小部件的样式，必须直接使用上述方法更改窗口小部件的 DOM 元素。