如何使用ExtJS设置样式

Question

如何使用ExtJS设置样式

我想使用以下代码更改元素或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

Run Code Online (Sandbox Code Playgroud)

对于我试过使用的extJs小部件Ext.getCmp.

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

Answer 1

Ste*_*rig 36

更改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>

Run Code Online (Sandbox Code Playgroud)

使用Javascript

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

Run Code Online (Sandbox Code Playgroud)

Ext.query将无法直接工作,因为它返回找到的DOM节点的简单数组,因此您必须循环结果以应用样式.你到底做了什么？

不幸的是,样式小部件并不那么容易.最小部件提供一些造型属性,如cls,ctCls,bodyCls或style但呈现组件时它们被应用.要在渲染后更改窗口小部件的样式,必须使用上述方法直接更改窗口小部件的DOM元素.

Answer 2

Jan*_*šek 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'
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	85763 次
最近记录：	11 年，7 月前