I know that I can set the style property of the label when creating it, but I want to change the style at run time, how can I do that?
the user pick: font, color, bg color and I want to change the existing label style as user desire.
thank you?
You can apply styles:
yourFormPanel.getForm().findField("field_name").labelEl.setStyle({"color":"red"});
or add/remove css classes:
yourFormPanel.getForm().findField("field_name").labelEl.addCls("red-label");
yourFormPanel.getForm().findField("field_name").labelEl.removeCls("black-label");
You can do it in many ways
Option 1(Global): Change the SASS variable value of "Ext.form.Labelable"
eg: $form-label-font-size: 11px !default;
Option 2: Create a mixin
eg:
file -> sass/src/form/Labelable.scss
#include extjs-label-ui(
$ui: 'customName',
$ui-font-size: 11
);
js:
{
xtype: 'textfield',
ui: 'customName'
}
Option 3: use form field's "labelStyle" config
eg:
{
xtype: 'textfield',
fieldLabel: 'Test Label',
labelStyle: 'font-weight: bold; color: #003168;',
labelWidth: 170
}
Option 4: add "cls" to the form field and add your style to your css file
eg:
js:
{
xtype: 'form',
defaults: {
cls: 'test-class'
}
}
CSS:
.test-class .x-form-item-label {
text-transform:capitalize;
color: #003168;
}
Related
I am not able to get border for combobox.
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
items: [{
xtype: "combo",
itemId: "combo1",
width: 80,
labelWidth: 50,
fieldLabel: "Filename",
store: filenames,
queryMode: "local",
displayField: "text",
fieldStyle: {
borderRadius: "3px"
}
}]
border is not displaying for combobox.
You appear to be missing the border config property from your component. That could be one of the reasons of your problem, especially as your component seems to be embedded in a toolbar.
From Sencha's documentation:
Specifies the border size for this component. The border can be a single numeric value to apply to all sides or it can be a CSS style specification for each style, for example: '10 5 3 10' (top, right, bottom, left).
For components that have no border by default, setting this won't make the border appear by itself. You also need to specify border color and style:
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
}
Note that setting borderRadius as you did does not imply that there will automatically be a border. It only states that "should there be a border, it will have that radius in its corners".
Most likely, all you need is to add the following to your combo configuration:
border: 1
Modifying Sencha's fiddle provided in the documentation to have a toolbar, the border is present whether you manually set the border property or not.
The following code - run within the sencha documentation itself - demostrates a combobox within a toolbar, with its border.
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
// Create the combo box, attached to the states data store
var cmb = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
border: 5,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr'
});
Ext.create({
xtype: "toolbar",
overflowHandler: "scroller",
dock: "top",
renderTo: Ext.getBody(),
items: [
cmb
]
});
Problems related to border and the like are often caused by the CSS of your team not being imported or the related js file not being loaded, in contexts where ExtJS has not been "prepared" built using sencha build but instead manually imported.
Alternatively, it's a CSS problem. In that case you'll have to use The Developer Tools of your browser of choice (F12 key, usually) and inspect the border-related properties for your component.
I have a menuitem with an icon specified, like this:
{
xtype: 'menuitem',
text: 'Random Text',
iconCls: 'x-fa fa-briefcase',
}
How do I gain access to this icon in the css and change the colour of it?
If you want to change all icons, do as EvanTrimboli suggests. In SCSS, add
$menu-glyph-color: dynamic(#008000);
If you want to change only certain icons, you should make a special class for that:
iconCls: 'x-fa fa-briefcase greenIcon',
and then add the new color to the CSS:
.greenIcon {
color: green;
}
Skip 'iconCls' (and 'glyph' for that matter) and declare the webfont icon class styled with inline CSS in the same field as the extjs component's text/header/title:
{
xtype: 'menuitem',
text: '<i class="x-fa fa-briefcase" style="color:green;"></i> Random Text',
}
In ExtJS 5, I wanna remove border of textfield and make it like this:
Of course it can be done by two labels, but it's not very clean. I tried following two ways on ExtJS5 official website, but it doesn't work:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
// here 1
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
border: 0, // set border = 0 or false
hideBorders: true
}, {
// here 2
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
style: 'border: none;background-image:none;' // set style border none
}]
});
Results:
Anybody who have any idea? Thanks.
If you absolutely need to use the textfield xtype, you can remove the border by clearing the inputWrapCls config. Some Ext JS themes add a border to the div wrapping the input element (and any trigger buttons), so you may have to clear the triggerWrapCls config as well.
You will likely also want to modify the fieldStyle config to remove the input element's background:
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
// remove default styling for element wrapping the input element
inputWrapCls: '',
// remove default styling for div wrapping the input element and trigger button(s)
triggerWrapCls: '',
// remove the input element's background
fieldStyle: 'background:none'
}
Try with displayfiled in place of textfiled
for reference go through the link. http://www.objis.com/formationextjs/lib/extjs-4.0.0/docs/api/Ext.form.field.Display.html
I have a label and I'm setting the text color like this, but the label text does not change color:
xtype: 'label',
text: 'My Text',
cls: 'myTextClass'
Here is the CSS:
.myTextClass {
color: #ff0000;
}
If I do this on the label it works:
style: {
color: '#ff0000'
}
Look at the label in Google dev tool. Probably your css gets overridden because there is a more specific rule. You have to add something to your css selector like
.x-label .myTextClass {
color: #ff0000;
}
I would like to change the color of a ExtJS textfield, but I don´t succeed. The label is the component that gets the color:
var textfield= Ext.create('Ext.form.Text',
{
id: 'textfield',
name: 'name',
fieldLabel: 'Name',
style: 'background-color: #ddd;',
allowBlank: false,
});
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [textfield]
});
Example:
http://jsfiddle.net/3ZZcZ/
How do I change the color?
You need to set fieldStyle instead of style. You also need to override the Ext JS default, which sets a background image on the field. Like this:
fieldStyle: 'background-color: #ddd; background-image: none;'
A better way to approach this is to set the fieldCls attribute to a CSS class.
Like this:
Field Config:
fieldCls: 'required'
CSS:
.required {
background-image:none;
background-color:#FFFFCC;
}
You can do it in many ways
Option 1(Global): Change the SASS variable value of "Ext.form.field.Text"
eg: $form-text-field-color: #003168 !default;
Option 2: Create a mixin
eg:
file -> sass/src/form/field/Text.scss
#include extjs-text-field-ui(
$ui: 'customName',
$ui-color: #003168
);
js:
{
xtype: 'textfield',
ui: 'customName'
}
Option 3: use form field's "fieldStyle" config
eg:
{
xtype: 'textfield',
fieldLabel: 'Test Label',
fieldStyle: 'font-weight: bold; color: #003168;',
labelWidth: 170
}
Option 4: add "cls" to form field and add your style to your css file
eg:
js:
{
xtype: 'form',
defaults: {
cls: 'test-class'
}
}
CSS:
.test-class .x-form-text {
color: #003168;
}
Expanding on Vasiliy's answer. The style can be set dynamically as follows:
Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');