如何將css應用到ext組件

Question

我正在創建一個組件。

這是我的代碼。

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

我想定製我的組件作爲一個CSS。因爲我認爲它的ID。

我的問題是如何將css應用到ext組件。通過添加新的id，然後css相對於該id或通過使用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>