Comment modifier les styles CSS dans ExtJS-Questions et réponses frontales-php.cn

Comment modifier les styles CSS dans ExtJS

PHPz

Libérer： 2023-04-26 18:10:09

original

1150 Les gens l'ont consulté

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'
});

Copier après la connexion

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'
});

Copier après la connexion

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>

Copier après la connexion

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;
}

Copier après la connexion

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 中

Copier après la connexion

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!