Icomoon glyph on group grid Extjs action column not working? - extjs

I have an issue on showing icomoon glyph on grid action columns using sencha architect in extjs 5.0 application. I am using group grid here. Glyphs are showing nicely on any ext button btw.
I have made an overwrite class for Ext.grid.column.Action like shown in following link as
Ext.define('MyApp.override.grid.column.Action', {
override: 'Ext.grid.column.Action',
// overridden to implement
defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store, view) {
var me = this,
prefix = Ext.baseCSSPrefix,
scope = me.origScope || me,
items = me.items,
len = items.length,
i = 0,
item, ret, disabled, tooltip,glyph, glyphParts, glyphFontFamily;
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
// Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
// we will pass an incorrect value to getClass/getTip
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (; i < len; i++) {
item = items[i];
disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
if(Ext.isFunction(item.getGlyph)){
glyph = item.getGlyph.apply(item.scope || scope, arguments);
}else{
glyph = item.glyph;
}
// Only process the item action setup once.
if (!item.hasActionConfiguration) {
// Apply our documented default to all items
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
if (glyph ) {
if (typeof glyph === 'string') {
glyphParts = glyph.split('#');
glyph = glyphParts[0];
glyphFontFamily = glyphParts[1];
} else {
glyphFontFamily = Ext._glyphFontFamily;
}
ret += '<span role="button" title="' + (item.altText || me.altText) + '" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-glyph ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
' style="font-family:' + glyphFontFamily + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + '>&#' + glyph + ';</span>';
} else {
ret += '<img role="button" alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + me.actionIconCls + ' ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
(Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' />';
}
}
return ret;
}
});
and also applied getGlyph function like:
getGlyph: function(v, meta, rec) {
return 'xe600#icomoon';
}
But still not showing any icon or glyp at the column.
I found the following output from the override class as
<span role="button" title="" class="x-action-col-icon x-action-col-glyph x-action-col-0 xe600#icomoon" style="font-family:icomoon"></span>
Which seems fine to me. Not sure what is wrong here, can any one help me?

Its my bad I could not check in the link i mentioned in my question:
I have to add the css line in my css file for showing the glyphs in action columns:
.x-action-col-glyph {font-size:16px; line-height:16px; color:#9BC8E9; width:20px}
After this glyphs are shown.

Related

Property 'form_blocks' does not exist on type 'GanttStatic'

I have isse when I want to implement multi select input in my project react typescript.
Property 'form_blocks' does not exist on type 'GanttStatic'.
how to fix it.
could any one help me please
gantt.form_blocks['multiselect'] = {
render: function(sns) {
var height = (sns.height || '23') + 'px';
var html =
"<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect' style='height:" +
height +
";'><select data-placeholder='...' class='chosen-select' multiple>";
if (sns.options) {
for (var i = 0; i < sns.options.length; i++) {
if (sns.unassigned_value !== undefined && sns.options[i].key == sns.unassigned_value) {
continue;
}
html += "<option value='" + sns.options[i].key + "'>" + sns.options[i].label + '</option>';
}
}
html += '</select></div>';
return html;
}
solved use add union any type.

Is there a way to customize the tooltip in the Ext.grid.column.action?

Is there a way to customize the tooltip in the Ext.grid.column.Action? I'd like to set the autoHide to false.
Thanks in Advance
You can by overriding or extending the ActionColumn.
You can see from the QuickTipManager docs that if you set a data item, data-hide="user" is the equivelent of autoHide=false.
The ActionColumn doesn't expose that functionality, it just uses the defaults, so we have to override the ActionColumns's defaultRenderer.
The defaultRenderer is a protected template function, so we can provide our own renderer and a custom config.
Start by copying the existing defaultRenderer source from the ActionColumn and then adding a few lines to handle our new config.
We can add a custom tooltipAutoHide config to the action config. Then in the defaultRenderer, we can read that config, defaulting to true, and render out data-hide="user" if tooltipAutoHide:false is set.
Here is an example. The relevant lines are
Read the config
//Get custom 'tooltipAutoHide' config from tip
tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
Render out 'data-hide="user"' if false
// write data-hide=user == autoHide:false
(!tooltipAutoHide ? ' data-hide="user"' : '') +
In column definition, set tooltipAutoHide:true
{
xtype:'myactioncolumn',
enter code here items:[{
tooltip: 'Edit',
tooltipAutoHide: false
}]
}
Here is the full sample
Ext.define('Ext.ux.column.MyActionColumn', {
extend: 'Ext.grid.column.Action',
xtype: 'myactioncolumn',
defaultRenderer: function (v, cellValues, record, rowIdx, colIdx, store, view) {
var me = this,
scope = me.origScope || me,
items = me.items,
len = items.length,
i, item, ret, disabled, tooltip, altText, icon, glyph, tabIndex, ariaRole;
// Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
// Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
// we will pass an incorrect value to getClass/getTip
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < len; i++) {
item = items[i];
icon = item.icon;
glyph = item.glyph;
disabled = item.disabled || (item.isDisabled ? Ext.callback(item.isDisabled, item.scope || me.origScope, [view, rowIdx, colIdx, item, record], 0, me) : false);
tooltip = item.tooltip || (item.getTip ? Ext.callback(item.getTip, item.scope || me.origScope, arguments, 0, me) : null);
//
//Get custom 'tooltipAutoHide' config from tip
tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
console.log(tooltipAutoHide);
altText = item.getAltText ? Ext.callback(item.getAltText, item.scope || me.origScope, arguments, 0, me) : item.altText || me.altText;
// Only process the item action setup once.
if (!item.hasActionConfiguration) {
// Apply our documented default to all items
item.stopSelection = me.stopSelection;
item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
item.hasActionConfiguration = true;
}
// If the ActionItem is using a glyph, convert it to an Ext.Glyph instance so we can extract the data easily.
if (glyph) {
glyph = Ext.Glyph.fly(glyph);
}
// Pull in tabIndex and ariarRols from item, unless the item is this, in which case
// that would be wrong, and the icon would get column header values.
tabIndex = (item !== me && item.tabIndex !== undefined) ? item.tabIndex : me.itemTabIndex;
ariaRole = (item !== me && item.ariaRole !== undefined) ? item.ariaRole : me.itemAriaRole;
ret += '<' + (icon ? 'img' : 'div') +
(typeof tabIndex === 'number' ? ' tabIndex="' + tabIndex + '"' : '') +
(ariaRole ? ' role="' + ariaRole + '"' : ' role="presentation"') +
(icon ? (' alt="' + altText + '" src="' + item.icon + '"') : '') +
' class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
(disabled ? me.disabledCls + ' ' : ' ') +
(item.hidden ? Ext.baseCSSPrefix + 'hidden-display ' : '') +
(item.getClass ? Ext.callback(item.getClass, item.scope || me.origScope, arguments, undefined, me) : (item.iconCls || me.iconCls || '')) + '"' +
(tooltip ? ' data-qtip="' + tooltip + '"' : '') +
// write data-hide=user == autoHide:false
(!tooltipAutoHide ? ' data-hide="user"' : '') +
(icon ? '/>' : glyph ? (' style="font-family:' + glyph.fontFamily + '">' + glyph.character + '</div>') : '></div>');
}
return ret;
}
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'myactioncolumn',
width: 50,
items: [{
iconCls: 'x-fa fa-cog',
tooltip: 'Edit',
tooltipAutoHide: false,
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
Here's a working Sencha Fiddle example.

How to have smart-table parse content as HTML / conditional formatting

I know that I can format a cell to parse content as a link in ng-repeat:
<a ng-href="{{::domainname}}/{{::row.sector}}/{{::row.cname}}/ipo-{{::row.tickerbb}}.html">{{::row.cname}}</a>
Here is the fiddle.
How do I make it dynamic, so that if row.tickerbb is null - show a different URL?
I tried to do it in the controller, looping through the data:
var i = 0;
$.each(data, function () {
if (data[i].tickerbb != null) {
data[i].cname = '<a title="' + data[i].cname + '"' + ' ng-href="' + domainname + '/' + data[i].sector + '/' + data[i].shortcname + '/ipo-' + data[i].tickerbb + '.html">' + data[i].cname + '</a>';
}
else {
data[i].cname = '<a title="' + data[i].cname + '" href="Holdings">' + data[i].cname + '</a>';
}
i += 1;
})
But the results show up as raw html tags:
How do I do conditional formatting of the smart-table cell? Or is there a way to sanitize cells in smart-tables?
Resolved it by constructing my link in the controller:
var i = 0;
$.each(data, function () {
data[i].weight = (data[i].weight * 100).toFixed(2) + '%';
if (data[i].shortcname != null) {
var cname = data[i].cname;
var sector = data[i].sector;
var shortcname = data[i].shortcname;
var tic = data[i].tickerbb;
var url = '<a title="' + cname + '" href="' + $scope.domainname + '/' + sector + '/' + shortcname + '/ipo-' + tic + '.html">' + cname + '</a>';
data[i].cname = url;
}
else
{
data[i].cname = '<a title="' + data[i].cname + '" href="Holdings">' + data[i].cname + '</a>';
}
i += 1;
})
And then sanitizing it inside ng-repeat:
<td ng-bind-html="row.cname"></td>

How can I add different icons in the legend

I have this chart http://jsfiddle.net/Cp73s/2169/, I want to add different icons in the legend but I dont know How can do it.
labelFormatter: function () {
$scope.data = this.total;
console.log($scope.data);
return '<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png" width="15" height="15"></span>' + this.y + ' (' + this.percentage.toFixed(2) + '%) - ' + this.name;
},
There's quite an extensive list, so you'll need to manually map out what images you'd like to use for each item. I've created a JSFiddle which illustrates how to do this using a switch statement.
To make it a bit quicker I've used Font Awesome which i'd recommend looking in to:
labelFormatter: function () {
$scope.data = this.total;
var labelName = this.name,
icon = '';
switch(labelName){
case 'APP Android':
icon = 'android';
break;
case 'APP Ios':
icon = 'apple';
break;
default: // If no match is found, revert to a check icon
icon = 'check'
}
return '<i class="fa fa-' + icon + '"></i> ' + this.y + ' ('+ this.percentage.toFixed(2) +'%) - ' +this.name;
},

getClass for actionColumn only in a few rows

I'm using the code below, to set the css class for an action column.
But even if the result is null, some elements are inserted by extjs.
getClass: function(v, meta, data) {
if (data.myDate < new Date())
return null;
else
return 'insert';
}
Generated html for return null:
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
class="x-action-col-icon x-action-col-1 null">
The major problem is that cursor is changed to a hand pointer when moving this "blank" space.
There is a way to not generate elements when no icon is to be shown?
I don't see any way to do it without extending action column. IMO easiest way is to provide custom renderer function. Example:
Ext.define('Ext.grid.column.MyAction', {
extend: 'Ext.grid.column.Action',
constructor: function(config) {
var me = this,
cfg = Ext.apply({}, config),
items = cfg.items || [me],
l = items.length,
i,
item,
cls;
me.callParent(arguments);
me.renderer = function(v, meta) {
v = Ext.isFunction(cfg.renderer) ? cfg.renderer.apply(this, arguments)||'' : '';
meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
for (i = 0; i < l; i++) {
item = items[i];
item.disable = Ext.Function.bind(me.disableAction, me, [i]);
item.enable = Ext.Function.bind(me.enableAction, me, [i]);
cls = (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope||me.scope||me, arguments) : (me.iconCls || ''));
if (cls !== null) {
v += '<img alt="' + (item.altText || me.altText) + '" src="' + (item.icon || Ext.BLANK_IMAGE_URL) +
'" class="' + Ext.baseCSSPrefix + 'action-col-icon ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' + (item.disabled ? Ext.baseCSSPrefix + 'item-disabled' : ' ') + (item.iconCls || '') +
' ' + cls + '"' +
((item.tooltip) ? ' data-qtip="' + item.tooltip + '"' : '') + ' />';
}
}
return v;
};
}
});

Resources