1. #1
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default Answered: Display (displayfield): How to change text color, alignment and font-weight?

    Answered: Display (displayfield): How to change text color, alignment and font-weight?


    Hello experts,

    I'd like to be able to change the field's alignment in certain cases, and in others change the text to bold, or change the color.

    I have been trying to change basically the style of displayfield without any success. I have a view, and I'm creating the fields in the initComponent method, I had already tried using style, renderer with no success, I guess this should be quite simple, but I am an ExtJS newbie. Any comments or advice are welcome.

    Thanks in advance.

    Regards,

    JV

  2. I'd suggest having a folder separate from your JS files (i.e. not in app) for CSS and images. The name 'resources' is commonly used.

    If you only have a very small quantity of CSS you could bundle everything into one file. Once it gets a bit bigger you'd need to split it up, which adds the complication of a build to concatenate the separate files into one. At that point you may want to consider something like SASS or even Sencha Cmd.

    Assuming you don't need a build step you can just include the CSS directly in the HTML with a link tag.

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Use the cls config to add a CSS class to the field's main element then use CSS to apply the relevant styling. If the styles don't have any effect use the browser's dev tools to inspect the styles and see which rules are beating yours and adjust your selectors accordingly.

  4. #3
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default Can't make it work.

    Can't make it work.


    Hi, thank you for your answer, I have been trying it out without success, I can't seem to override the Ext theme CSS.

    In my view's initComponent method, I have something like this:

    Code:
    {
       xtype : 'displayfield',
       name : 'dayLbl',       
       componentCls : 'x-form-display-field my-bold-text',
       style : {'font-weight' : 'bold'},
       value : this.getDayLbl()
    }
    Inspecting the HTML and CSS I can see that the style is being applied to the table which has the Display field in, but the Ext Theme overrides it.
    extjscss.jpg
    What can I do in this case?

    Thanks, regard!

  5. #4
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default


    Also tried cls as you sugested, same result .

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Use cls, not componentCls. However, the net result is the same, an extra class on the outer element. Once you've got the extra class on the element it is just basic CSS from then on. The way you're throwing settings at this, expecting different results, implies you think there's some deeper magic going on. There isn't. Add a class, use CSS for styling - that's it.

    You need to target the correct element with the selector. The font-weight is set on the x-form-display-field so it won't inherit any value you set on an ancestor element.

    Use something like:

    Code:
    .my-bold-text .x-form-display-field {
        font-weight: bold;
    }

  7. #6
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default


    Thank you. This may sound completely silly, I hope you understand I'm new in this. Where should I put the CSS? A separate file? inside the view?Seriously, don't get mad at me, this is completely new for me.

  8. #7
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    It needs to go in a CSS file, there's no special way to put it 'inside a view'. If you're building the ExtJS CSS from source you can include it in there, otherwise just create your own.

  9. #8
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default


    Ok, I'll create a new CSS file, but...

    Where should I put it?
    How can I reference it?
    How should I name it?

    This is how my project looks like.
    extjscss.PNG
    Thanks for your advice and patience, I really appreciate it.

    Regards.

  10. #9
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,624
    Vote Rating
    331
    Answers
    550
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    I'd suggest having a folder separate from your JS files (i.e. not in app) for CSS and images. The name 'resources' is commonly used.

    If you only have a very small quantity of CSS you could bundle everything into one file. Once it gets a bit bigger you'd need to split it up, which adds the complication of a build to concatenate the separate files into one. At that point you may want to consider something like SASS or even Sencha Cmd.

    Assuming you don't need a build step you can just include the CSS directly in the HTML with a link tag.

  11. #10
    Sencha User
    Join Date
    Sep 2014
    Posts
    13
    Vote Rating
    0
    Answers
    2
    jesus.valencia is on a distinguished road

      0  

    Default


    Thank you so much for the help and patience, for my solution I did as following:
    • Used cls for displayfield and assigned a class.
    • Created as suggested a "resources" folder and created a css file containing the class I declared for the displayfield. (Actually it was ".my-class div {...} ").
    • Added reference of this new stylesheet at index.html.
    It's working just fine. Again, thanks!!

    Best regards,

    JV

Thread Participants: 1