如何将 css 应用于 ext 组件

Question

我正在创建一个组件。

这是我的代码。

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

我想将我的组件自定义为 css。

我的问题是如何将 css 应用于 ext 组件。通过添加新的 id，然后针对该 id 的 css 或使用相同的 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>