ExtJS: l'évolution dynamique de l'élément de styles

Je suis en train d'affecter dynamiquement des styles à mes éléments (dans ce cas, un ExtJS displayfield).

Je ne peux pas utiliser les classes CSS car je ne sais pas ce que la couleur soit jusqu'à l'exécution.

Je suis en train d'essayer:

myDisplayField.getEl().applyStyles({ color: '#ff0000' });  //fail
myDisplayField.getEl().setStyle('color', '#ff0000');       //fail

Juste pour obtenir le mécanisme de droit, mais ils ne semblent travailler.

Il fonctionne à l'aide de Ext.get(<div id>).setStyle(...), mais ça ne semble pas propre à moi. Est-il une raison pour laquelle les tentatives antérieures ne fonctionnent pas?

Ce qui me manque?
Merci.

OriginalL'auteur Colin | 2013-09-26

  1. 6

    La raison en est simple: vous êtes en essayant de définir les styles sur un mauvais élément. Chaque champ, y compris displayfield, a assez complexe basée sur la table de DOM structure qui encapsule l'étiquette de champ, la réelle de l'élément d'entrée (ou un div pour afficher des champs), et les éléments de soutien. field.getEl() renvoie la haut, ou principal, élément d'un composant; dans ce cas, c'est le top <table> tag. Ce que vous avez besoin est l'élément d'entrée à la place.

    Maintenant, si vous regardez le DOM de la structure, vous remarquerez que les <div> que vous avez besoin de définir des styles sur un id de displayfield-123-inputEl. L'-inputEl suffixe est là pour une raison; dans la plupart des cas, il indique que l'élément a un Poste.dom.Élément contextuel dans sa Composante. Pour un champ, qui serait field.inputEl propriété qui est disponible après que le terrain a été rendu à la DOM. Vous pouvez l'utiliser ainsi:

    myDisplayField.inputEl.setStyle(...)

    Ou simplement utiliser la méthode de convenance disponible pour les champs:

    myDisplayField.setFieldStyle(...)

    Je vous suggère aussi de ne pas coder en dur les couleurs, mais plutôt d'utiliser des classes CSS à la place. Dans la plupart des cas, il y a un choix limité de couleurs en fonction d'une condition, comme la saisie de données incorrectes, etc. À l'aide de CSS demandent un peu plus de travail initial, mais vous permettra d'économiser beaucoup de maux de tête en bas de la route, quand quelqu'un va venir avec une bonne idée de changer l'ombre de rouge utilisé pour la saisie de données incorrectes, ou somesuch.

    Pour compléter votre réponse jsfiddle, comme je l'ai déjà fait, et ma réponse a été la fin) jsfiddle.net/eC9j8
    Les couleurs arn est pas codé en dur: il suffit qu'ils sont dans cet extrait de code; dans mon code, ils sont calculés à l'aide d'un gradient. Mais j'ai appris beaucoup de cette réponse est grandement vous remercions d'avoir pris le temps d'aider
    mais pourquoi displayfield et étiquette être si différents les uns des autres? displayfield est utilisé dans un formulaire, mais c'est tout. Donc, il devrait être tout aussi facile de modifier stylisticly comme une étiquette... de toute façon me semble étrange.

    OriginalL'auteur Alex Tokarev