web-dev-qa-db-fra.com

Comment définir des styles à l'aide d'ExtJS

Je voulais changer les styles comme la couleur, la taille de la police, l'arrière-plan, etc. d'un élément ou widget extJS en utilisant le code suivant mais aucun ne fonctionne:

Ext.get('mydivid').setStyle({.......});     // does not work
Ext.get('mydivid').applyStyle({.......});   // does not work
Ext.select('mydivid').applyStyle({.......});   // does not work
Ext.query('.myclass').applyStyle({.......});   // does not work

Et pour le widget extJs, j'ai essayé d'utiliser Ext.getCmp.

Quelqu'un sait-il comment changer les styles d'un élément html et d'un widget extJS en utilisant extJS et non CSS?

javascriptextjs
24
Sarfraz

Changer le style des éléments HTML DOM est assez simple:

HTML 

<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div id="el1">Element 1</div>
        <div class="el">Element [1]</div>
        <div class="el">Element [2]</div>
    </body>
</html>

Javascript

Ext.onReady(function() {
    Ext.get('el1').setStyle('color', 'red');
    Ext.select('.el').setStyle('color', 'green');
});

Ext.query ne fonctionnera pas directement car il renvoie un simple tableau de nœuds DOM trouvés, vous devrez donc parcourir le résultat pour appliquer des styles. Qu'est-ce que tu as fait exactement?

Malheureusement, le style des widgets n'est pas si simple. La plupart des widgets fournissent certains attributs de style tels que cls, ctCls, bodyCls ou style mais ils sont appliqués lors du rendu du composant. Pour changer le style des widgets après le rendu, vous devez modifier les éléments DOM du widget directement en utilisant les méthodes ci-dessus.

35
Stefan Gehrig

Il y a une erreur de frappe dans votre question:

ce n'est pas applyStyle mais applyStyles.

applyStyles est une méthode d'Ext.Element, vous pouvez l'utiliser comme suit:

var win = new Ext.Window({
      width: 200, 
      height: 200
});
win.show();

win.body.applyStyles({ 
  'background-color':'red',
  'border': '1px solid blue'
});
7
Jan Míšek

Ce qui suit est possible sur le widget (mais seulement avant son rendu, car la propriété style config est appliquée pendant le rendu):

Ext.define('Ext.Component', {
  style: {},
  initComponent: function(config) {
    this.callParent(config);
    this.style['background-color'] = 'red';
  }
});

Ceci est utile si disons que vous agissez sur une valeur spécifique d'un autre paramètre de configuration.

Comme indiqué ne fois rend vous avez accès à la méthode setStyle () du Ext.Element Encapsulé:

component.getEl().setStyle(config);

Enfin, vous pouvez aller directement à la viande et accéder directement au DOM element Encapsulé:

component.getEl().dom.style.backgroundColor = 'red';
4
jenson-button-event