ExtJS에서 CSS 스타일을 수정하는 방법
- PHPz원래의
- 2023-04-26 18:00:121121검색
ExtJS는 웹 애플리케이션 개발을 단순화하도록 설계된 강력한 JavaScript 라이브러리입니다. ExtJS로 개발할 때 비즈니스 요구 사항에 맞게 CSS 스타일을 사용자 정의해야 하는 경우가 많습니다. 이 기사에서는 ExtJS에서 CSS 스타일을 수정하는 방법을 설명합니다.
1. ExtJS에서 사용하는 CSS를 이해하세요
ExtJS로 개발할 때 ExtJS의 CSS 파일을 소개해야 합니다. 명령줄 도구를 사용하여 ExtJS 프로젝트를 생성하면 모든 ExtJS 스타일을 포함하는 전역 스타일 파일 app.css가 자동으로 생성됩니다. 다음과 같은 방법으로 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와 함께 제공되는 스타일 시트 파일에 저장됩니다. 이러한 스타일은 브라우저의 개발자 도구에서 볼 수 있습니다.
2. 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 스타일 파일을 사용할 수도 있습니다. CSS 파일은 ExtJS 프로젝트의 index.html 파일에 도입될 수 있습니다.
<!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() 메소드를 사용하여 스타일 노드를 생성하고 이를 헤드에 삽입하여 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 스타일을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!