PDA

View Full Version : How to set font family and font size for a label?



aladdinwang
8 May 2010, 7:05 AM
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.

Eugen_
8 May 2010, 9:22 AM
How to set font family and font size for a label?

set something like this in your css


label {
font: normal 12px courier !important;
}

aladdinwang
8 May 2010, 5:23 PM
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


items: [
xtype: 'label',
text: 'Hey, it's a label'
]


How to insert css definition into this kind of codes?

Eugen_
8 May 2010, 8:46 PM
Yes, it is the css definition.
For change all labels style you can add code like this to you *.html file



<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


<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



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



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

you can try to use the style property too



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

kramal
6 May 2013, 11:53 PM
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:




.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
Ext.Loader.setConfig({enabled:true}) to app.js
3)then


items:[{
...
cls: 'example ',
...
}]