web-dev-qa-db-ja.com

ExtJSを使用してスタイルを設定する方法

elementまたは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。

CSSではなくextJSを使用してhtml要素とextJSウィジェットのスタイルを変更する方法を知っている人はいますか？

javascriptextjs
24
Sarfraz

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要素を直接変更する必要があります。

35
Stefan Gehrig

あなたの質問にタイプミスがあります：

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'
});
7
Jan Míšek

ウィジェットでは次のことが可能です（ただし、レンダリング中にstyle configプロパティが適用されるため、レンダリングされる前のみ）。

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';
4
jenson-button-event