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;
}
Related
I'm using ExtJs 7 - Modern
Unfortunately, in all objects, text cannot be copied in the usual way by selecting it with a finger.
Can you please tell me if there is any solution for this feature?
By default most components are not user selectable.
Set the body of a container as user selectable and you can select the text with your finger or a mouse.
xtype: 'container',
userCls: 'ordersummary',
style: {
'border': '1px solid black',
'padding': '5px',
'margin': '0 0 5px 0'
},
// this is what makes it selectable.
userSelectable: {
bodyElement: 'text'
},
see the userSelectable config for Ext.Container.
it is basically setting the user-select
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',
}
Is it possible to put label at bottom of text field?
I'm required to have the UI look like a PDF/printed form where most of the field labels are centered below input fields.
A CSS style/class approach is good enough. I just want to get this over in a hurry.
Thanks in advance.
Add a custom cls to your textfield as follows:
Ext.create('Ext.Panel',{
renderTo: Ext.getBody(),
width: 300,
height: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
cls: 'pdfField',
labelSeparator: ''
}]
});
Then create the pdfField class:
For ExtJS (5) =>
div.pdfField .x-form-item-label {
display: table-footer-group;
text-align: center;
}
For ExtJS (4) =>
.pdfField td {
display: table-caption;
}
.pdfField tr>td:first-child {
display: table-footer-group;
text-align: center;
}
Here is a fiddle ta works with both versions: https://fiddle.sencha.com/#fiddle/h35
Not that it looks better with ExtJS 5, that is because in ExtJS 5 uses divs to display the textfield content while ExtJS 4 uses table cells.
Can I make a label somehow behave as a form field? I added a name field and it does not work.
{
xtype: 'label',
name: 'id'
}
However this works :
{
xtype: 'textfield',
name: 'id'
}
Should I just use a textfield and strip away its border?
UPDATE :
I am using a displayfield, and that seems to work. But, apart from changing the background colour, I cannot change any other properties of this using style.
{
flex: 1,
xtype: 'displayfield',
text: 'rollout',
style: 'font-size: 26px; background-color: #B6DAFF; ', //font size does not work :( Only background color does.
padding: '0',
margin: 0,
name: 'status',
width: 100
}
I am able to populate label in form panel. Please try below code
var form = new Ext.form.FormPanel({
items: [{
xtype:'label',
text: 'Send To:',
style: 'font-size: 26px; background-color: #B6DAFF; ',
}]
});
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;
}