Related
I can't display custom icons on the actions tab from ng2-smart-table. I have installed Eva Icons from Akevo Team and I want to use them. I have changed the edit button to show some custom icons but the problem is that nothing appears. On the left side of delete, a brush icon had to appear.
Here is an image with the problem:
Here is the code:
settings = {
edit: {
editButtonContent: '<nb-icon icon="brush"></nb-icon>',
saveButtonContent: '<nb-icon icon="checkmark"></nb-icon>',
cancelButtonContent: '<nb-icon icon="close-circle"></nb-icon>'
},
columns: {
device: {
title: 'Device',
sortDirection: 'asc'
},
type: {
title: 'Type',
sort: false,
filter: false
},
serialNumber: {
title: 'Serial Number'
},
status: {
title: 'Status'
}
}
};
Try this :
settings = {
hideSubHeader: true,
actions: {
custom: [
{
name: 'edit',
title: '<nb-icon icon="brush"></nb-icon>'
},
{
name: 'save',
title: '<nb-icon icon="checkmark"></nb-icon>'
},
{
name: 'cancel',
title: '<nb-icon icon="close-circle"></nb-icon>'
}
],
add: false,
edit: false,
delete: false
}
...
};
hope this works for you!
Also you can use other icons sets like material icons, just add it to your project and then change your settings like:
settings = {
edit: {
editButtonContent: '<span class="material-icons">mode_edit</span>',
saveButtonContent: '<span class="material-icons">check_circle</span>',
cancelButtonContent: '<span class="material-icons">cancel</span>'
},
/* ... */
}
settings = {
hideSubHeader: true,
sort: true,
actions: {
position: 'left',
add: false,
edit: false,
delete: false,
select: false,
custom: [
{
name: 'viewRecord',
type: 'html',
title: '<i class="far fa-file-alt" title="View Record"></i>',
},
{
name: 'editRecord',
type: 'html',
title: '<i class="far fa-edit" title="Edit Record"></i>',
},
],
},
columns: {
column1: {
title: 'Column 1',
type: 'string',
width: '35%',
},
column2: {
title: 'Column 2',
type: 'string',
},
column3: {
title: 'Column 3',
type: 'string',
},
},
};
I found this thread:
https://github.com/akveo/ng2-smart-table/issues/1034
And so as mentioned in the last comment:
temporarily use the old nebular-icons
https://github.com/akveo/nebular-icons/tree/master/src/icons
I downloaded the required icon's SVG and added them as:
settings = {
edit: {
editButtonContent: '<img src="assets/images/nb-edit.svg" width="40" height="40" >'
. . .
}
. . .
}
Works well enough.
let newSettings = {
mode: "external",
actions: {
add: false,
edit: false,
delete: false,
position: 'right'
},
hideSubHeader: true,
add: {
addButtonContent: '<i class="nb-plus"></i>',
},
edit: {
editButtonContent: '<img src="assets/images/icons/outline/settings-2-outline.svg" width="20" height="20" >',
},
delete: {
deleteButtonContent: '<img src="assets/images/icons/outline/trash-2-outline.svg" width="20" height="20" >',
confirmDelete: true,
},
}
I am stuck with highchart data. I have few variables in array format and in want to display them in tooltip of the chart but it is showing whole array instead of a single entity per record.
Here is my code:
$json['sales'] = array();
$json['xaxis'] = array();
$json['revenue'] = array();
$json['sales']['name'] = $this->language->get('text_products');
$json['sales']['type'] = 'column';
$json['sales']['data'] = array();
switch ($range) {
default:
case 'day':
$results = $this->model_report_sale->getSaleVsOptions($filter_data, $date=1);
foreach ($results as $key => $value) {
$json['sales']['data'][] = $value['quantity'];
$json['revenue'][] = $value['total'];
$json['xaxis'][] = $value['xaxis'];
}
break;
and my ajax call code is below:
$.ajax({
type: 'get',
url: 'index.php?route=dashboard/sale/getSale&token=<?php echo $token; ?>&range=' + $(this).attr('href') + '&filter_option=' + $('#option .active a').attr('href'),
dataType: 'json',
beforeSend: function() {
$('.salevsoption').find('.progress_loading_bar').fadeIn();
},
complete: function() {
$('.salevsoption').find('.progress_loading_bar').fadeOut();
},
success: function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'sale_vs_option',
type: 'line'
},
title: {
text: ''
},
subtitle: {
text: ''
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
categories: json['xaxis'],
crosshair: true
},
yAxis: [{ // Primary yAxis
labels: {
//format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Products',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}],
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.0f}'
}
}
},
tooltip: {
shared: true,
pointFormat: 'Products: <b>{point.y:.0f}</b><br/> Sales: <b>{point.revenue:.2f}</b>'
},
legend: {
layout: 'vertical',
align: 'left',
x: 360,
verticalAlign: 'top',
y: -15,
floating: true,
enabled: false
},
series: [
json['sales']
]
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
I have issue in tooltip section with {point.revenue:.2f}.
I get everything fine but didnot get revenue value in tooltip.
When i replace {point.revenue:.2f} with json['revenue'] it display whole array on each record of chart.
You will need to use formatter instead format API Doc
tooltip: {
formatter: function() {
return 'Products: <b>' + this.y + '</b><br/> Sales: <b>' + this.point.revenu + '</b>'
}
}
Fiddle
How to specify tags in the value of the textfield in ext js.
my code:
var myText = new Ext.form.TextField({
readOnly: true,
id: "key",
cls:"overflowText",
value: '<span style="color:red">'+name+'</span>',
});
This doesnt apply color to the value.How can i do it?
Use the fieldCls property, you shouldn't need the span.
Fiddle
// Style
<style>
.overflowText {
color: red;
}
</style>
// Code
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.Panel', {
width: 500,
height: 300,
title: "FormLayout Panel",
layout: 'form',
renderTo: Ext.getBody(),
bodyPadding: 5,
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
fieldCls: 'overflowText',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last'
}, {
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype: 'email'
}, {
fieldLabel: 'DOB',
name: 'dob',
xtype: 'datefield'
}, {
fieldLabel: 'Age',
name: 'age',
xtype: 'numberfield',
minValue: 0,
maxValue: 100
}, {
xtype: 'timefield',
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}]
});
}
});
Maybe it happens because style rule is missing semicolon at the end? So it should be <span style="color:red;">
How can you preselect a specific listbox option when your plugin dialog opens?
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
'values': [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
]
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});
For some reason this is missing in the Listbox documentation but the solution is quite simple: Add a value property to the listbox object you pass to tinymce and it will preselect it.
Be careful to set the value not to the text/label but the actual value of the listbox item you want to preselect.
tinymce.PluginManager.add('mybutton', function(editor, url) {
editor.addButton('mybutton', {
icon: true,
image: url + '/img/mybutton.png',
title: 'Select An Option',
onclick: function() {
editor.windowManager.open({
title: 'My options',
body: [
{
type: 'listbox',
name: 'myoptions',
label: 'My Options',
values: [
{text: 'Option 1', value: '1'},
{text: 'Option 2', value: '2'},
{text: 'Option 3', value: '3'}, /* preselect this option */
{text: 'Option 4', value: '4'},
{text: 'Option 5', value: '5'},
],
value: '3'
}
],
onsubmit: function(v) {
editor.insertContent(v.data.myoptions);
}
});
}
});
});
I found it much easier to include an external page in the dialog so I can create my own form from scratch and easily control it with Jquery.
// Opens a HTML page inside a TinyMCE dialog and pass in two parameters
editor.windowManager.open({
title: "My PHP/HTML dialog",
url: 'mydialog.php',
width: 700,
height: 600
}, {
content: tinymce.activeEditor.selection.getContent({format: 'html'}),
nodeName: editor.selection.getNode().nodeName
});
Then in mydialog.php interact with the current TinyMCE with:
/* get content from TinyMCE */
console.log(args.content);
console.log(args.nodeName);
/* set content in TinyMCE */
top.tinymce.activeEditor.insertContent('My changed content here');
/* close the dialog */
top.tinymce.activeEditor.windowManager.close();
The reference can be found here:
http://www.tinymce.com/wiki.php/Tutorials:Creating_custom_dialogs
Try to use onPostRender and set the selected value to with the value() function.
Example:
{
type: 'listbox',
name: 'text',
values: [
{text : '1', value : '1'},
{text : '2', value : '2'},
{text : '3', value : '3'}
],
onPostRender: function() {
this.value('2');
}
}
According to their listbox example (https://www.tiny.cloud/docs-4x/demo/custom-toolbar-listbox/) it can be done with onPostRender. I have the following code working in WordPress 5.3.2 (classic editor plugin enabled):
tinymce.PluginManager.add('mybutton', function( editor, url ) {
editor.addButton( 'mybutton', {
type: 'listbox',
text: tinyMCE_object.button_name,
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: '[one_half]', value: '[one_half] [/one_half]' },
{ text: '[one_third]', value: '[one_third] [/one_third]' },
{ text: '[one_fourth]', value: '[one_fourth] [/one_fourth]' },
{ text: '[one_fifth]', value: '[one_fifth] [/one_fifth]' },
{ text: '[grid]', value: '[grid] [/grid]' },
{ text: '[grid_element]', value: '[grid_element] [/grid_element]' }
],
onPostRender: function () {
// Select the second item by default
this.value('[one_third] [/one_third]');
}
});
});
I'm trying to call a function from initComponent. However, I'm unable to get the scope of this object, thus running into ReferenceErrors.
The function I'm calling is getFileType and it's missing the scope and I'm unable to get it. (line nos: 204).
Is there a way to change scope inside the handler.
Also, by adding scope:this inside the button, I'm losing scope to pick the form data...
Any help here would be awesome!
Ext.define('D.application.component.de.AddConnectionPanel', {
extend: 'Ext.form.FieldSet',
initComponent : function()
{
var databaseConnDetails = Ext.create('Ext.form.Panel',{
bodyPadding: 15,
// width:'auto',
region:'center',
layout:{
align: 'center',
},
defaults: {
anchor: '100%',
},
title: 'Database Details',
items: [{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
xtype: 'dsqcombobox',
name: 'DB_TYPE',
emptyText: 'DB Type',
flex: 1,
fieldID: 'Field-1',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_1',
},
{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_URL',
emptyText: 'DB Url',
flex: 1,
fieldID: 'Field-2',
},
{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_PORT',
emptyText: 'DB Port',
flex: 1,
fieldID: 'Field-3',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_2',
},
{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_SCHEMA',
emptyText: 'Schema Name',
flex: 1,
fieldID: 'Field-4',
},
{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_LABEL',
emptyText: 'Schema Label',
flex: 1,
fieldID: 'Field-6',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_4',
},
{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
xtype: 'dsqtextarea',
name: 'DB_DESCRIPTION',
emptyText: 'Connection Description',
flex: 1,
fieldID: 'Field-6',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_6',
},
{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_USERNAME',
emptyText: 'DB Username',
flex: 1,
fieldID: 'Field-5',
},
{
readOnly: false,
hidden: false,
xtype: 'dsqtextfield',
name: 'DB_PASSWORD',
inputType: 'password',
emptyText: 'DB Password',
flex: 1,
fieldID: 'Field-6',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_7',
},
{
defaults: {
},
items: [{
readOnly: true,
hidden: true,
xtype: 'dsqtextfield',
name: 'ID',
emptyText: 'Connection ID',
flex: 1,
fieldID: 'Field-6',
}],
layout: 'hbox',
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_8',
},
{
defaults: {
},
items: [{
readOnly: false,
hidden: false,
width:70,
xtype: 'dsqbutton',
name: 'save',
fieldLabel: 'Save',
fieldID:'Field-8',
}],
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
xtype: 'dsqfieldcontainer',
layoutID: 'Contain_9',
}],
xtype: 'dsqfieldset',
layoutID: 'Connection Details'
});
var fileConnDetails = Ext.create('Ext.form.Panel', {
bodyPadding:15,
defaults: {
anchor:'100%',
},
width:500,
title: 'File Details',
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'InputFile',
id:'filefield',
emptyText: 'File',
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Browse...'
}],
buttons: [{
text: 'Upload',
layout:{
pack:'center',
align:'middle',
},
handler: function() {
var form = this.up('form').getForm(); // Get form details
if(form.isValid()){
var fileName = form.findField('filefield').getSubmitValue();
// Check to see if file type is supported
var retVal = getFileType(fileName);
if (retVal != DSQ_SUCCESS){
Ext.Msg.alert('Unsupported File Type');
return;
}
// Parse file and read data
retVal = parseInputFile(fileName, fileArray);
if (retVal != DSQ_SUCCESS) {
Ext.Msg.alert('Error! unable to read file');
return;
}
form.submit({
success: function(fp, action) {
Ext.Msg.alert('Success', 'Your file "' + action.result.file + '" has been uploaded.');
},
failure: function(fp, action) {
Ext.Msg.alert('Failed', 'File "' + action.result.file + '" upload failed');
}
});
}
}
}]
});
var connectionInfo = Ext.create('Ext.container.Container', {
autoEl:'div',
width:700,
bodyPadding: 5, // Don't want content to crunch against the borders
layout:'card',
items:[{
id:'file_card',
items:[fileConnDetails],
},{
id:'db_card',
items:[databaseConnDetails],
}],
});
var DataSourceOptionsContainer = Ext.create('Ext.container.Container',{
region:'center',
layout:{
type:'vbox',
align: 'center',
},
items : [{
xtype:'radiogroup',
vertical:false,
columns:2,
items: [{
boxLabel: 'Flat-File',
name:'datasource',
inputValue:'flatfile',
width:80,
checked:true,
},{
boxLabel: 'Database',
name:'datasource',
inputValue:'database',
width:80
}],
listeners: {
change: function(radiogroup, newVal, oldVal) {
var listenerObj = newVal.datasource;
switch(listenerObj) {
case 'database':
connectionInfo.getLayout().setActiveItem('db_card');
break;
case 'flatfile':
connectionInfo.getLayout().setActiveItem('file_card');
break;
default:
console.log("No such Object in connection group");
break;
}
}
}
}],
});
var config = {
items: [DataSourceOptionsContainer, connectionInfo]
};
Ext.apply(this,config);
this.callParent(arguments);
},
getFileType: function(fileName)
{
var fileTypesAllowed = [".csv", ".xls", ".xlsb"];
alert("File Type verification");
if(!Ext.Array.contains(fileTypesAllowed, fileName)) {
return 1;
}
return 1;
},
parseInputFile: function(fileName, fileArray)
{
return 1;
},
onRender : function()
{
this.callParent(arguments);
}
});
Store the reference to the form panel object in this instead of using a local variable:
this.fileConnDetails = Ext.create('Ext.form.Panel', {
(you'll also have to replace further references to that variable in initComponent with this.fileConnDetails)
Then, as you suggested, add scope: this to your button. You'll then have both the form panel and your functions in the same scope:
buttons: [{
text: 'Upload',
layout:{
pack:'center',
align:'middle',
},
handler: function() {
var form = this.fileConnDetails.getForm(); // Get form details
if(form.isValid()){
var fileName = form.findField('filefield').getSubmitValue();
// Check to see if file type is supported
var retVal = this.getFileType(fileName);
if (retVal != DSQ_SUCCESS){
Ext.Msg.alert('Unsupported File Type');
return;
}
// Parse file and read data
retVal = this.parseInputFile(fileName, fileArray);
if (retVal != DSQ_SUCCESS) {
Ext.Msg.alert('Error! unable to read file');
return;
}
form.submit({
success: function(fp, action) {
Ext.Msg.alert('Success', 'Your file "' + action.result.file + '" has been uploaded.');
},
failure: function(fp, action) {
Ext.Msg.alert('Failed', 'File "' + action.result.file + '" upload failed');
}
});
}
},
scope: this
}]
getFileType is part of your class. You need to add:
scope: this,
handler: function() {
// ....
this.getFileType();
}