エクステンションコンポーネントにCSSを適用する方法

Question

コンポーネントを作成しています。

ここに私のコードです。

{ 
    xtype : 'component', 
    width : 320, 
    listeners :{ 
     afterrender : function(me,eOpts) { 
      var divID = this.el.dom.id; 
     } 
    } 
} 

私のコンポーネントをCSSとしてカスタマイズしたいと思っていました。そこに私はそのidにaccssingしています。

私の質問は、cssをextコンポーネントに適用する方法です。新しいIDを追加し、そのIDに関連してcssを追加するか、smae idを使用します。

Answer 1

IDにアクセスする必要はありません。コンポーネントの独自のIDを定義することができます。あなたはまだ試してみました何

Ext.application({ 
 
    name: 'Fiddle', 
 
    launch: function() { 
 
    Ext.create('Ext.Component', { 
 
     html: 'Hello world!', 
 
     id: 'myComponentId', 
 
     renderTo: Ext.getBody() 
 
    }); 
 
    } 
 
});

#myComponentId { 
 
    width: 300px; 
 
    height: 200px; 
 
    padding: 20px; 
 
    color: #FFFFFF; 
 
    background: #000000; 
 
}

<link rel="stylesheet" href="https://cdn.sencha.com/ext/gpl/4.1.1/resources/css/ext-all.css"> 
 
<script type="text/javascript" src="https://cdn.sencha.com/ext/gpl/4.1.1/ext-all-debug.js"></script>