extjs 是一款功能强大的 javascript 库，旨在简化 web 应用程序的开发。在使用 extjs 进行开发时，我们往往需要对 css 样式进行定制化以满足业务需求。本文将介绍如何在 extjs 中修改 css 样式。
一、了解 extjs 使用的 css
在使用 extjs 开发时，我们需要引入 extjs 的 css 文件。在使用命令行工具创建 extjs 项目时，会自动生成一份全局的样式文件 app.css，该文件包含了所有的 extjs 样式。我们可以通过以下方式在 app.js 中引入这个文件：
ext.application({ name: 'myapp', extend: 'myapp.application', requires: [ 'ext.plugin.viewport', 'ext.layout.*', 'ext.form.*' ], // 引入全局样式文件 css: ['app.css'], mainview: 'myapp.view.main.main'});
在 extjs 的组件中，会默认使用一些 css 样式，这些样式都是存放在 extjs 自带的样式表文件中的。可以在浏览器的开发者工具中查看到这些样式。
二、如何修改 css 样式
通过 extjs 的组件配置修改样式在使用 extjs 的组件时，我们可以通过配置项的方式修改组件的样式。比如在一个按钮组件上修改字体颜色和背景颜色：
ext.create('ext.button.button', { text: 'my button', ui: 'custombutton', // 通过 ui 配置修改样式 style: { color: 'white', // 通过 style 配置修改样式 background: 'blue' }, renderto: 'button-container'});
使用自定义 css除了通过配置项的方式修改样式之外，我们还可以使用自定义的 css 样式文件。可以在 extjs 项目的 index.html 文件中引入 css 文件：
<!doctype html><html><head> <meta charset="utf-8"> <title>myapp</title> <link rel="stylesheet" type="text/css" href="resources/css/custom.css"> <!-- 引入自定义 css --></head><body> <div id="app"></div> <script src="ext/build/ext-all.js"></script> <script src="app.js"></script></body></html>
在自定义的 css 样式文件中，我们可以修改 extjs 中组件的样式。比如修改按钮组件的样式：
.custombutton { color: white; background-color: blue;}
在代码中动态修改 css 样式如果需要在 javascript 代码中动态修改 css 样式，可以使用 ext.dom.helper.createdom() 方法创建一个样式节点，并将其插入到 head 中，从而动态修改 css 样式：
var styleel = ext.dom.helper.createdom({ tag: 'style', // 标签名称 html: '.custombutton {color: white;background-color: blue;}' // 自定义的样式});ext.gethead().appendchild(styleel); // 将节点插入到 head 中
使用以上方式可以灵活地控制样式的变化，满足我们的需求。
总结
在 extjs 中修改 css 样式主要有三种方法：通过配置项修改样式、使用自定义 css 样式文件和在代码中动态修改 css 样式。根据需求的不同，选择不同的方法即可。同时，需要注意组件默认使用的 extjs 样式，可以通过查看浏览器开发者工具中的样式来定位需要修改的样式类。
以上就是如何在extjs中修改css样式的详细内容。