最少代码：HelloWorld.html源文件下载
https://docs.sencha.com/extjs/6.7.0/classic/Ext.button.Button.html
setStyle<link rel="stylesheet" href="theme-gray-all.css">
<script src="ext-all.js"></script>
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/
Ext.create('Ext.panel.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
items: [{ xtype : 'button',text: '测试1'
// ,style:{ color:'blue' } // 会被 theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
}
]
});
}); </script><!------------------------------------------------------------------------------------------------------->
<div id="helloWorldPanel" /> <!--调用-->
因为字体大小，颜色 CSS嵌套太深，直接修改不太会有效果
<!- 这里注释掉了 --<link rel="stylesheet" href="theme-gray-all.css">-->
<script src="ext-all.js"></script>
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/
Ext.create('Ext.panel.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
items: [{ xtype : 'button',text: '测试2'
,style:{ color:'red' } // 会被 theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
}
]
});
}); </script><!------------------------------------------------------------------------------------------------------->
<div id="helloWorldPanel" /> <!--调用-->
cls加外部CSS修改，因为ExtJS的CSS嵌套太深，要引入CLS机制修改
<link rel="stylesheet" href="theme-gray-all.css">
<link rel="stylesheet" href="aa.css"> //自定义CSS
<script src="ext-all.js"></script>
<script>Ext.onReady(function () { /*---------------------------------------------------------------------------------*/
Ext.create('Ext.panel.Panel', {
renderTo: 'helloWorldPanel',
height: 200,
width: 600,
title: 'Hello world',
header:{ cls:'x-panel-header-new' },//关键代码
items: [{ xtype : 'button'
,text: '测试1'
, cls: 'bntAdd' //在aa.css里的.bntAdd 等价于
// ,style: { border: '2px solid red',background: '#4ca5ff' }
// ,style:{ color:'blue' } // 会被 theme-gray-all.css 覆盖掉，去 掉theme-gray-all.css，就有用
,handler: function() {Ext.get( 'helloWorldPanel').setStyle({"background-color":'blue'});}
}
]
});
}); </script><!------------------------------------------------------------------------------------------------------->
<div id="helloWorldPanel" /> <!--调用-->aa.css.bntAdd
{
border: 2px solid red;
background:#4ca5ff;
color:#58b3e8; /* button的字体颜色, 直接修改无效 */
}
.x-panel-header-new .x-panel-header-title-default {
color:#58b3e8; /* panel header 的字体颜色 */
background:#4ca54c; /* panel header 的背景颜色 */
}
