I'm using Redactor and need to dynamically add elements to a custom dropdown menu. I can't find any way of doing this in the documentation - does anyone know if this is possible?
Yes, it's possible if you use this:
$('#redactor').redactor({
focus: true,
buttonsAdd: ['|', 'button1'],
buttonsCustom: {
button1: {
title: 'Button',
callback: function(buttonName, buttonDOM, buttonObject) { /* … */ },
dropdown: {
alignleft: {
title: lang.align_left,
func: 'alignmentLeft'
},
aligncenter: {
title: lang.align_center,
func: 'alignmentCenter'
}
}
}
}
});
Related
How can I have toggle star-shaped button in Extjs, so when the state is 'pressed' it appears like a filled star, and otherwise like an outlined star?
For example, like the star that appears in Google chrome address bar to bookmark the page:
and when it is clicked it changes it appearance to
or it could be a heart that changes to
Or in gmail
For this you can use viewmodel binding to iconCls. Each button has the config: enableToggle: true and it will publishe its pressed-state to the parent-viewModel. Use the bind expression of iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}' to make it work.
(also integrated FontAwesome5)
Here is the Link to a Sencha-Fiddle
The code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
layout: 'vbox',
viewModel: {}, // <-- important
items: [{
xtype: 'button',
text: 'Bookmark',
enableToggle: true,
bind: {
iconCls: '{theButton.pressed?"fas fa-star":"far fa-star"}',
},
reference: 'theButton',
handler: function (button) {
if (button.pressed) {
Ext.toast({
html: 'pressed state',
title: 'The button was clicked...',
width: 250,
align: 't'
});
} else {
Ext.toast({
html: 'unpressed state',
title: 'The button was clicked...',
width: 250,
align: 't'
});
};
}
}]
});
}
});
For panel header:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
title: 'Sample Panel',
tools: [{
glyph: 'xf005#FontAwesome',
pressed: false,
callback: function () {
if (this.pressed) {
this.setGlyph('xf005#FontAwesome'); // star
} else {
this.setGlyph('xf006#FontAwesome'); // star-o
}
this.pressed = !this.pressed;
}
}],
renderTo: Ext.getBody()
});
}
});
And the font awesome style for index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I tried to close parent window in extjs with this.up().close(), but this.$className is undefined.
I am looking for a solution without using Ext.getCmp.
https://fiddle.sencha.com/#view/editor&fiddle/3b4i
Your scope is wrong. You give your element the scope of the application which is the reason why this.up() won't work. If you remove scope: this you should be able to use this.up() to get the parent container.
I made a fork of your sencha fiddle with a working example:
Sencha fiddle example
Not sure what you want to hide, anyway:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'panel',
title: 'my Panel',
html: "Some text.",
width: 350
}, {
xtype: 'box',
html: ' Close window',
listeners: {
render: function () {
this.getEl().on('click', function () {
//this.up('container').hide(); // Hide wrapper container
this.previousSibling().hide(); // Hide previous Panel
}, this);
}
}
}]
});
}
});
By default, under the Formatting menu (when the button is clicked), there are these options:
Normal Text
Quote
Code
Header 1
Header ...
Header 5
I would like to only have these options:
Normal Text
Quote
Code
Is there any way to do that? I've been scouring the configuration options and haven't been able to find out how to do it.
Olivérs answer is wrong.
You can easily achieve this by doing the following:
$('#redactor').redactor({
formattingTags: ['p', 'blockquote', 'pre']
});
Demo: http://jsfiddle.net/EkM4A/
Sadly the only way to achieve this is to decorate your redactor instance before init and overwrite the default toolbar setting in redactor.
You can see a working POC here: http://jsfiddle.net/Zmetser/7m3f9/
And the code below:
$(function() {
// Decorate redactor Object before init
$.Redactor.fn = (function () {
var toolbarInitOriginal = this.toolbarInit;
// Create a new toolbarInit method which suits our needs
this.toolbarInit = function (lang) {
// Grab the default toolbar...
var toolbar = toolbarInitOriginal(lang);
// ...and overwrite the formatting dropdown menu
toolbar.formatting.dropdown = {
p: {
title: lang.paragraph,
func: 'formatBlocks'
},
blockquote: {
title: lang.quote,
func: 'formatQuote',
className: 'redactor_format_blockquote'
},
pre: {
title: lang.code,
func: 'formatBlocks',
className: 'redactor_format_pre'
},
};
return toolbar;
};
return this;
}.call($.Redactor.fn));
// Init redactor
$('#redactor').redactor({
buttons: ['link', 'formatting', 'html']
});
});
I am using highchart, in that two button coming for exporting but I only want one
i tried the code below but it's not working..
exporting: {
buttons: {
exportButton: {
enabled:true
},
printButton: {
enabled:false
}
}
},
Please help? Or any suggestions?
Use this
exporting: {
buttons: {
contextButton: {
menuItems: null,
onclick: function() {
this.exportChart();
}
}
}
}
This will generate direct export button without any context menu
Check out this link
http://jsfiddle.net/HnGMZ/
I am trying to dynamically set the padding on a grid panel I have showing some data. On the event that my checkbox was clicked, it should apply the padding cls.
Here is the relevant ExtJS code:
var permissionsGrid = Ext.create('Ext.grid.Panel', {
//...
items: [{
xtype: 'checkbox',
name: 'EditRoles',
boxLabel: 'Edit User Roles',
handler: function(field, value) {
userRoleFilter = '';
permissionsGrid.removeCls('permissions_panel_nopadding');
console.log(permissionsGrid.hasCls('permissions_panel_nopadding'));
permissionsGrid.addCls('permissions_panel_padding');
console.log(permissionsGrid.hasCls('permissions_panel_padding'));
}
}],
//...
});
Here is my CSS
.permissions_panel_nopadding {
padding: 0px;
}
.permissions_panel_padding {
padding: 5px;
}
When the checkbox is clicked, currently nothing happens. I tried to use:
permissionsGrid.getView().refresh();
...but to no prevail.
You are always removing one class and always adding another class. You need to "switch" the classes. If you don't need special styling when the checkbox isn't clicked, you should add/remove only one class.
handler: function(field, value) {
userRoleFilter = '';
if ( value === true) {
permissionsGrid.removeCls('permissions_panel_nopadding');
permissionsGrid.addCls('permissions_panel_padding');
}
else {
permissionsGrid.addCls('permissions_panel_nopadding');
permissionsGrid.removeCls('permissions_panel_padding');
}
console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}
Here is my fiddle with basic panel and only one CSS class: https://fiddle.sencha.com/#fiddle/ne3
EDIT:
ExtJS 6.0+
Since ExtJS 6.0.0, you can use the toggleCls method:
handler: function(field, value) {
permissionsGrid.toggleCls('permissions_panel_padding', value);
permissionsGrid.toggleCls('permissions_panel_nopadding', !value);
console.log(permissionsGrid.hasCls('permissions_panel_padding'), permissionsGrid.hasCls('permissions_panel_nopadding'));
}