I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}
Related
I need to customize an Ext.panel.Tool to display the icon 'fa fa-file-excel-o' from font awesome in the header of a grid. Following what I found online I have declared the tool:
header: {
itemPosition: 1, // after title before collapse tool
items: [{
xtype: 'tool',
type: 'export',
cls:'component-tool-export',
handler: 'doExportData'
}]
},
And the css:
.component-tool-export .x-tool-export{
background-image:none !important;
content: "\f1c3" !important;
}
The tool is there and I can click on it, but the icon is not displayed. Can anyone give me some hint to fix this?
You are not adding content to the :before pseudo element, which is required to have the content displayed. You could use the following CSS:
.component-tool-export .x-tool-export{
background-image:none !important;
font: 16px/1 FontAwesome;
}
.component-tool-export .x-tool-export:before{
content: "\f1c3" !important;
}
But if you already use Sencha CMD, I would recommend to conform with Sencha's own SASS files and make use of the full feature set of Sencha Fashion:
$tool-export-glyph: dynamic($fa-var-file-excel-o $tool-glyph-font-size $font-icon-font-family);
.#{$prefix}tool-export {
#include font-icon($tool-export-glyph);
background: none;
}
How can I use Font Awesome in ui.bootstrap.rating?
I found out, that when I add state-on="'fa-star'" state-off="'fa-star-o'" to and changed class="glyphicon" to class="fa" in ui-bootstrap-tpls it works.
But I guess there is a more custom way to change the class of the icons.
Yeah as you are doing with setting state-off and state-on is their recommended manner. If you are going to have lots of the ratings on a page, I would just create a custom template and over-ride the stock template. Here is a post custom templates
I had Font Awesome and so didnt want to include Glyphicons.
uib.bootstrap Version: 1.3.3 - 2016-05-22 uses limited Glyphicons, so this is what i added to my css
.glyphicon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-star:before {
content: "\f005";
}
/**
copied from
.fa-star:before {
content: "\f005";
}
*/
.glyphicon-star-empty::before {
content: "\f006";
}
.glyphicon-chevron-right:before {
content: "\f054";
}
.glyphicon-chevron-left:before {
content: "\f053";
}
.glyphicon-chevron-up:before {
content: "\f077";
}
.glyphicon-chevron-down:before {
content: "\f078";
}
i.e. added css from Font Awesome 4.6.3 to appropriate glyphicon names
Now i dont know if this code will break on version of Font Awesome
I have a form which has a displayfield.The value of the form is set as a hyperlink.Now I also need an image to appear along with the hyperlink.How can this be done?Below is my code to add hyperlink:
xtype:'displayField',
fieldLabel: 'Name',
value: 'abc',
renderer:function(value){
return ''+value+'' //need to add an image with this
}
I usually go for one of these approaches, mostly equivalent:
Add a css class to my a element, with background-image and some padding-left.
Enclose the anchor element in a div with a similar css class.
Add a span before the anchor. Additionally use display: inline-block and give it a width and a height since it has no text content.
You could just precede it with an img, but for some reason I never do that. It's ugly if the image doesn't get loaded.
Examples:
CSS
.myimgclass: {
background-image: url(...);
background-position: 0;
background-repeat: no-repeat;
}
span.myimgclass {
width: 16px;
height: 16px;
display: inline-block;
}
So in your renderer you can the following:
Inline the anchor:
renderer:function(value){
return '<a class="myimgclass" href="#">'+value+'</a>';
}
Enclosed in a div
renderer:function(value){
return '<div class="myimgclass">'+value+'</div>';
}
Prepended as a span:
renderer:function(value){
return '<span class="myimgclass"></span>'+value+'';
}
Prepended as an img:
renderer:function(value){
return '<img src="../your/img/path/here.png." />'+value+'';
}
I would also like to add that all these approaches are based on you wanting to add the image as html, through your renderer. Another approach is to set your component's html: configuration. Then use ctrl.update('...'); if you ever want to update it. The html content should be identical to the examples above, but value won't be available. So renderer is more for dynamic content or generic during initialization, while html is controlled mostly from code (e.g. events).
I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.
If they do this using CSS, what CSS do I use and when/how to I apply it?
I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.
/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
background-image: none;
border: 0px none;
margin-top: 1px;
}
a.ux-linkbutton.x-btn-default-small-focus {
background-color: inherit;
}
a.ux-linkbutton * {
font-size: inherit !important;
}
a.ux-linkbutton:hover {
text-decoration: underline;
background-color: inherit;
}
/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
extend: "Ext.button.Button",
alias: "widget.linkbutton",
cls: "ux-linkbutton",
initComponent: function() {
this.callParent();
this.on( "click", this.uxClick, this, { priority: 999 } );
},
// This function is going to be used to customize
// the behaviour of the button and click event especially as it relates to
// its behaviour as a link and as a button and how these aspects of its
// functionality can potentially conflict.
uxClick: function() {
//Ext.EventObject.preventDefault();
//Ext.EventObject.stopEvent();
//Ext.EventObject.stopPropagation();
//return false;
}
} );
The click handler is a work-in-progress.
The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.
With Ext 4.0.7 I had managed to do the following:
View:
...
{
xtype: 'button'
,text: 'Discard changes'
,action: 'cancel'
,cls: 'secondary-action-btn'
}
CSS:
....
.secondary-action-btn {
border: none;
background: none;
}
.secondary-action-btn span {
cursor: pointer;
text-decoration: underline;
}
I recall there is an extension called linkButton. You can refer to the extjs forum here
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}