Question

我想使用以下代码更改元素或 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小部件的样式？

Answer 1

更改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元素。

Answer 2

您的问题中存在拼写错误：

它不是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'
});

Answer 3

在窗口小部件上可以执行以下操作（但仅在呈现之前，因为在呈现期间应用了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 element：

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

如何使用ExtJS设置样式

3 个答案: