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',
}
Related
I have an application which has to be screen readable (for blind people) and I'm struggling to read a FontAwesome Icon. Right now I have this for example:
{
xtype: 'actioncolumn',
items: [
{
iconCls: 'x-fa fa-envelope',
}],
dataIndex: 'edit',
text: 'Send E-Mail'
}
And I use NVDA Screen reader -> https://www.nvaccess.org/download/
However it cannot read this text ("Send E-Mail") on mouse hover. I know that font-awesome has option to include aria-label="Send E-Mail" but how can I apply it to ExtJS item?
Have you tried this:
{
iconCls: 'x-fa fa-envelope',
tooltip: 'Send E-Mail',
}
I wasn't able to find a way to make the "actioncolumn" compliant, so I have converted them to a "widgetcolumn" and that works better. The downsides to this is that you cannot have multiple "widgets" in one column, so each of actions will get its own column and you have buttons in the columns instead of the more elegant icons. But, what can you do, Ext....
{
xtype: 'widgetcolumn',
text: 'Edit', //column header
align: 'center',
width: 60,
widget: {
xtype: 'button',
width: 40,
iconCls: 'x-fa fa-pencil',
ariaLabel: 'click to edit',
handler: 'edit'
}
}
For the handler, the arguments are a little different since it's now a button (this is specific to my case, using the record id):
edit: function(button) {
var grid = button.up('grid'),
store = grid.getStore(),
recordId = button.getWidgetRecord().getId(),
record = store.findRecord('id', recordId);
//and so on....
}
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
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 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;
}
i have some text put in title config of dataview in sencha touch mobile app. This dataview is in turn present inside a navigation view, which itself inside a container.
The issue i face here is that i want the toolbar that appears at the top because of using navigation view to have ui:'light' . By default if i use chrome's web inspector tool to view the class that is applied in the DOM it shows that .x-toolbar-dark class is applied to it. How do i change this ui:dark property which applies by default to the toolbar because i have used navigationview.
I am customizing default theme and i have changed the base color of the theme..but due to dark ui being applied to toolbar the darker color is being applied to toolbar.
I know about the usage of custom mixins and then applying those mixins to toolbar we can customize it...but i am not creating a toolbar anywhere here so i cannot apply mixins for it.
Above image shows the difference of color caused due to ui:dark in toolbar. Color on left is original color
The basic question herein is how do you decide which ui style will apply to such toolbars which appear due to use of any component such as navigation view or for ex when you supply a title ?
Below is my navigation view code
Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'offersnewnavigationview',
config: {
fullscreen: true,
height: '100%',
autoDestroy: false,
defaultBackButtonText: '',
navigationBar: {
items: [{
align: 'left',
id: 'newSlideBut',
iconCls: 'list',
ui: 'plain'
}
]
},
items: [
{
xtype: 'offersnewdataview'
}]
}
});
my bad..that was silly..!
Just need to add ui config to navigationBar config property in the code...does the job now.
Ext.define('MobileApp.view.Offers.OffersNewNavigationView', {
extend: 'Ext.navigation.View',
xtype: 'offersnewnavigationview',
config: {
fullscreen: true,
height: '100%',
autoDestroy: false,
defaultBackButtonText: '',
navigationBar: {
ui:'light',
items: [{
align: 'left',
id: 'newSlideBut',
iconCls: 'list',
ui: 'plain'
}
]
},
items: [
{
xtype: 'offersnewdataview'
}]
}
});