ExtJS에서 CSS 스타일을 수정하는 방법-프런트엔드 Q&A-php.cn

집

웹 프론트엔드

프런트엔드 Q&A

ExtJS에서 CSS 스타일을 수정하는 방법

PHPz

Apr 26, 2023 pm 06:00 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.