Maison > Article > interface Web > Comment modifier les styles CSS dans ExtJS

Comment modifier les styles CSS dans ExtJS

PHPzoriginal: 2023-04-26 18:00:121151parcourir

ExtJS est une puissante bibliothèque JavaScript conçue pour simplifier le développement d'applications Web. Lors du développement avec ExtJS, nous devons souvent personnaliser les styles CSS pour répondre aux besoins de l'entreprise. Cet article explique comment modifier les styles CSS dans ExtJS.

1. Comprendre le CSS utilisé par ExtJS

Lors du développement avec ExtJS, nous devons introduire le fichier CSS d'ExtJS. Lorsque vous utilisez l'outil de ligne de commande pour créer un projet ExtJS, un fichier de style global app.css sera automatiquement généré, contenant tous les styles ExtJS. Nous pouvons introduire ce fichier dans app.js de la manière suivante :

Ext.application({
    name: 'MyApp',
    extend: 'MyApp.Application',
    requires: [
        'Ext.plugin.Viewport',
        'Ext.layout.*',
        'Ext.form.*'
    ],
    // 引入全局样式文件
    css: ['app.css'],
    mainView: 'MyApp.view.main.Main'
});

Dans les composants ExtJS, certains styles CSS seront utilisés par défaut, et ces styles sont stockés dans le fichier de feuille de style fourni avec ExtJS. Ces styles peuvent être consultés dans les outils de développement de votre navigateur.

2. Comment modifier les styles CSS

Modifier les styles via la configuration des composants ExtJS

Lors de l'utilisation de composants ExtJS, nous pouvons modifier le style du composant via des éléments de configuration. Par exemple, pour modifier la couleur de la police et la couleur d'arrière-plan d'un composant bouton :

Ext.create('Ext.button.Button', {
    text: 'My Button',
    ui: 'customButton', // 通过 ui 配置修改样式
    style: {
        color: 'white',  // 通过 style 配置修改样式
        background: 'blue'
    },
    renderTo: 'button-container'
});

Utiliser du CSS personnalisé

En plus de modifier le style via des éléments de configuration, nous pouvons également utiliser des fichiers de style CSS personnalisés. Les fichiers CSS peuvent être introduits dans le fichier index.html du projet ExtJS :

<!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>

Dans le fichier de style CSS personnalisé, on peut modifier le style des composants dans ExtJS. Par exemple, modifiez le style du composant bouton :

.customButton {
    color: white;
    background-color: blue;
}

Modifiez dynamiquement le style CSS dans le code

Si vous devez modifier dynamiquement le style CSS dans le code JavaScript, vous pouvez utiliser Ext.dom.Helper. createDom() pour créer un nœud de style et insérez-le dans la tête pour modifier dynamiquement le style CSS :

var styleEl = Ext.dom.Helper.createDom({
    tag: 'style', // 标签名称
    html: '.customButton {color: white;background-color: blue;}'  // 自定义的样式
});
Ext.getHead().appendChild(styleEl);   // 将节点插入到 head 中

L'utilisation de la méthode ci-dessus peut contrôler de manière flexible les changements de style pour répondre à nos besoins.

Résumé

Il existe trois manières principales de modifier les styles CSS dans ExtJS : modifier les styles via des éléments de configuration, utiliser des fichiers de style CSS personnalisés et modifier dynamiquement les styles CSS dans le code. En fonction de vos besoins, vous pouvez choisir différentes méthodes. Dans le même temps, vous devez faire attention au style ExtJS utilisé par défaut par le composant. Vous pouvez localiser la classe de style qui doit être modifiée en affichant le style dans les outils de développement du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS dom 样式表

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir la couleur de la police sur blanc en CSSArticle suivant：Comment définir la couleur de la police sur blanc en CSS

Articles Liés

Voir plus