如何将css应用于ext组件

Question

我正在创建一个组件。

这是我的代码。

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

我想将我的组件自定义为css。因为我正在考虑它的身份。

我的问题是如何将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>