I can't add custom button with other toolbars
This code work
tinyMCE.init({
selector: '#d1',
toolbar:'customButton',
setup(editor) {
editor.addButton('customButton', {
text: 'My button',
icon: false,
onclick() {
editor.insertContent(" <b>It's my button!</b> ")
},
})
},
})
But, if i add one more toolbar, it didn't work, why?
toolbar: 'forecolor backcolor' +
'customInsertButton',
If you want to use multiple toolbars in TinyMCE you can use either:
toolbar array: https://fiddle.tiny.cloud/TBhaab
toolbar: ['myCustomToolbarButton','forecolor backcolor'],
https://www.tiny.cloud/docs/configure/editor-appearance/#usingmultipletoolbars
toolbar(n): https://fiddle.tiny.cloud/VBhaab
toolbar1: 'myCustomToolbarButton',
toolbar2: 'forecolor backcolor',
https://www.tiny.cloud/docs/configure/editor-appearance/#toolbarn
Note, you are showing TinyMCE 4 button syntax. If you are using TinyMCE 5 (5.7.1 is the current version) the API for creating custom buttons has changed:
TinyMCE 4 version: https://fiddle.tiny.cloud/QBhaab
TinyMCE 5 version: https://fiddle.tiny.cloud/SBhaab
editor.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Button',
onAction: function () {
editor.insertContent(" <b>It's my button!</b> ")
}
});
More info: https://www.tiny.cloud/docs/ui-components/toolbarbuttons/#howtocreatecustomtoolbarbuttons
This isn't so much a TinyMCE issue and is more so a JavaScript issue. The problem is with your concatenation logic in:
toolbar: 'forecolor backcolor' +
'customInsertButton',
This will end up becoming toolbar: 'forecolor backcolorcustomInsertButton' which as you can see is missing a space/separator between backcolor and customInsertButton. So to solve that, just make sure to add a space, such as:
toolbar: 'forecolor backcolor ' +
'customInsertButton',
Related
I am trying to create a universal titlebar with a back button for my application. I am including it in the various views by using {xclass:mUserStories.view.titlebar}.
Here is the code for the titlebar:
Ext.define('mUserStories.view.titlebar', {
extend: 'Ext.TitleBar',
id: 'narwhal',
config: {
docked: 'top',
// id: 'narwhal',
title: 'CHW Module',
items: [{
ui: 'back',
text: 'Back',
id: 'backButton'
// hidden: true
}]
}
})
However, when I try to dynamically change the toolbar when switching to different pages, the console.log of the titlebar says the _title has changed but the text on the titlebar and the "hidden" property of the button does not change.
Here is the code for the logic that occurs when the button is pressed to switch the page:
toPage: function (arg) {
var t = Ext.getCmp('narwhal');
var b = Ext.getCmp('backButton');
console.log(t,b)
if (arg === PAGES.PATIENT_LIST) {
t.setTitle('Patient List');
b.setHidden(true)
}
Ext.getCmp('viewPort').setActiveItem(arg);
}
I have also tried to include a ref at the top for Narwhal : '#narwhal' and use var t = this.getNarwhal(), but this does not work either.
I am not sure if the problem lies with where the id is being kept, how the id is being called, or because the page is not refreshing properly. Any advice would help!
Thank you for your time :)
I have had the same situation in my project.
I managed to get everything to work like you want it by having a controller owning a reference to the title bar and listening to activeItemChange on my tabPanel.
I am only a month old with extjs and still experimenting. My question is: I have a grid panel and within it the 'tools' config options. I am using this to enable/disable a Ext.grid.feature.Grouping variable. The 2 handler functions have the logic to disable/enable the 2 views by clicking on the 2 'cross' buttons that appear on the right side of the header. The logic is fine. However, I would like to display my set of custom images in place of the 'cross' buttons. Can this be done? If yes, how? Do I need to make some changes in the css code for that?
I have looked into the documentation and also done a good search but nothing seems to answer my question.
Specify a custom type config on your tools:
Ext.create('Ext.grid.Panel', {
...
tools: [
{
type: 'enable-grouping',
handler: function() {
...
}
},
{
type: 'disable-grouping',
handler: function() {
...
}
}
]
});
Then define the following classes in a stylesheet to style your new tools:
.x-tool-enable-grouping {
background-image: url('path/to/tool/image/enable-grouping.png');
}
.x-tool-disable-grouping {
background-image: url('path/to/tool/image/disable-grouping.png');
}
The size of a tool image should be 15 x 15 px
How can I set icon used in my Panel's "Title Bar"? Maybe I need to add an image myself, but if so I suppose I need to define or configure that somewhere?
{
xtype: 'treepanel',
title: 'Projects',
width: 200,
store: Ext.data.StoreManager.lookup('projects'),
tools: [
{
type: 'add', // this doesn't appear to work, probably I need to use a valid class
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
},
...
]
},
There are a set of 25 icons that can be specified by using the type config.
check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type
To get add symbol use
tools:[{
type:'plus',
tooltip: 'Add project',
// hidden:true,
handler: function(event, toolEl, panel){
// Add logic
}
}]
the specified type:'add' is not in the list
If you want to add your own tool type and be able to assign it an image of your own, you can do the following:
Add a css class in your css file:
.x-tool-mytool { background-image: url(path_to_your_image_file) !important; }
Then in your tools, simply use 'mytool' as the type:
{
type:'mytool',
tooltip: 'This is my tool',
handler: function(event, toolEl, panel){
// my tool logic
}
}
Make sure that you use the same name in tool's type as you used for the css class suffix.
according to the ExtJS documentation, these predefined types are available:
collapse, expand, maximize, minimize, resize, restore, move, close
minus, plus, prev, next, pin, unpin, search, toggle, refresh
save, print, gear, help
right, left, up, down
one can enter whatever type one wants:
{type: 'YOURTYPE'}
while providing a 15px icon - or preferably icon sprites
(the background-position certainly not applies for single icons, but icon sprites):
.x-tool-img.x-tool-YOURTYPE{
background: url('../images/custom_tool_sprites.png') no-repeat 0 0;
}
sources: Ext.panel.Tool-cfg-type, codefx.biz.
I think you mean "set buttons used in my Panel's Title Bar", not "set icon". You can use buttons config of Panel, not tools:
buttons: [{
text: 'Add',
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
}]
You can use other configurations like bbar (bottom bar), fbar (footer), tbar (top), lbar (left), rbar (right) for position the toolbar. One small notice is the config objects in buttons have the default xtype as button, so you don't need to explicitly specify them.
I'm using extjs4 and I'm trying to create a tab panel, that each tab has a different grid that loads data from a store. (each grid different store)
I would like to load the particular store only when the user clicks on the respective tab.
I don't see how I can catch the user click on the panel.
How I can do that?
I had a similar performance loading issue and failed to solve it with deferredRender. You have to add the event activate for the tab you want to load when the tab is activated :
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'activate' : function(){
store2.load();
},
}
}
Worked fine for me even if it's a temporary solution. Extjs 4.1 should improve loading/rendering performances. We'll see.
You can activate the panel by placing setActiveItem() in tab handler.
Ok, I figured out, I just needed to have deferredRender=true and to add the respective store.load() on the beforerender event on every tab:
var lowerTabPanel = Ext.create('Ext.tab.Panel', {
deferredRender: true,
items: [
{
title: 'tab1',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store1.load();
},
}
},
{
title: 'tab2',
bodyPadding: 10,
html : 'A simple tab',
listeners: {
'beforerender' : function(){
store2.load();
},
}
},
]
});
Ext.TabPanel has config option deferredRender. May be it helps you.
Documentation:
true by default to defer the rendering of child items to the browsers DOM until a tab is activated. false will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.
Update: Also look at autoLoad config option in Ext.data.JsonStore, it should be false.
I'm trying to create programatically an EnahncedGrid with a menu. I've got the grid to work, but I've been unable to use the menu. It just not shows up. The code is as follows:
<script>
sMenu = new dijit.Menu({});
sMenu.addChild(new dijit.MenuItem({
label: "Delete Record",
iconClass: "dijitEditorIcon dijitEditorIconCancel",
onClick : function(){
alert(1);
}
}));
sMenu.startup();
/**
* El grid propiamente dicho
*/
var grid = new dojox.grid.EnhancedGrid({
id: "grid_"+i,
query: {
idDocument: '*'
},
plugins: {
nestedSorting: true,
indirectSelection: true,
menus: {rowMenu:sMenu}
},
onRowDblClick: openFile,
structure: layout
})
</script>
Any idea what I'm doing wrong?
I haven't used this myself, but I have two possible suggestions:
First, make sure you're dojo.require-ing "dojox.grid.enhanced.plugins.Menu" and are only instantiating the widgets within a dojo.addOnLoad or dojo.ready.
If you've already done that, the second thing I'd suggest is giving your menu an id, and passing that id to the rowMenu property of the menus object (in other words, pass a string, not the widget itself). Although, the way you're doing it seems like it should work, judging from the code.
You can see a test page with working menus here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/enhanced/test_enhanced_grid_menus.html