1. #1
    Ext User aladdinwang's Avatar
    Join Date
    May 2010
    Location
    Hangzhou, China
    Posts
    30
    Vote Rating
    0
    aladdinwang is on a distinguished road

      0  

    Default How to set font family and font size for a label?

    How to set font family and font size for a label?


    I found the font size of a label is much different with other GUI components, such as button, combox...

    Is extjs giving an approach to change the font family and font size for a label, and generally to change most of the GUI components' look and like.

  2. #2
    Ext User Eugen_'s Avatar
    Join Date
    Feb 2010
    Location
    Tomsk, Russia
    Posts
    106
    Vote Rating
    -5
    Eugen_ is infamous around these parts

      0  

    Default


    How to set font family and font size for a label?
    set something like this in your css
    Code:
    label {
        font: normal 12px courier !important;
    }

  3. #3
    Ext User aladdinwang's Avatar
    Join Date
    May 2010
    Location
    Hangzhou, China
    Posts
    30
    Vote Rating
    0
    aladdinwang is on a distinguished road

      0  

    Default


    label {
    font: ....
    }

    It's a css definition,right? How can I apply this css styles to ext gui definition?


    Eg: here is my part of codes
    Code:
     items: [
        xtype: 'label',
        text: 'Hey, it's a label'
    ]
    How to insert css definition into this kind of codes?

  4. #4
    Ext User Eugen_'s Avatar
    Join Date
    Feb 2010
    Location
    Tomsk, Russia
    Posts
    106
    Vote Rating
    -5
    Eugen_ is infamous around these parts

      0  

    Default


    Yes, it is the css definition.
    For change all labels style you can add code like this to you *.html file

    Code:
        <head>
            <style type="text/css">
                label {
                    font: normal 12px courier !important;
                }
            </style>
        </head>
    or you can add style in an external style.css file and add this line to your *.html file

    Code:
    <link rel="stylesheet" type="text/css" href="style.css" />
    if you need individual style for specific label only, you can add code below in css file

    Code:
    .mylabel {
        font: normal 12px courier !important;
    }
    and add the cls property in your code

    Code:
    items: [{
        cls: 'mylabel',
        xtype: 'label',
        text: 'Hey, it's a label'
    }]
    ps:

    you can try to use the style property too

    Code:
    items: [{
        style: 'font: normal 12px courier',
        xtype: 'label',
        text: 'Hey, it's a label'
    }]

  5. #5
    Sencha User
    Join Date
    Dec 2012
    Posts
    40
    Vote Rating
    -1
    kramal is an unknown quantity at this point

      -1  

    Default another method

    another method


    it will be more better if you used following method (this method will work if you follow MVC pattern):

    1)You should create some css file (example.css), and there you should define your css rule
    for example:


    Code:
    .example{
      color: red;
     ...
    }
    I must note that this css file should be located in resources/css/ directory.

    2)You no need in inclusion this css file into index.html. But if you have some problems in this item. Add
    Code:
    Ext.Loader.setConfig({enabled:true})
    to app.js
    3)then
    Code:
    items:[{
    ...
    cls: 'example ',
    ...
    }]
    Last edited by kramal; 6 May 2013 at 11:56 PM. Reason: ok

Thread Participants: 2

Tags for this Thread