I am using a custom menu for TinyMCE4. In the initialization call, my menu setup looks like this:
menu : {
... <other menu sections>
help: { title: 'Help', items: 'help' }
},
I was expecting this to yield the following, which is what you get by default or when the Help item is in the menubar property (blue highlighting is mine):
Instead I get nothing.
How can I manually include the help menu?
EDIT : This defect was fixed in TinyMCE 4.7.8 so its no longer correct to name the item 'Help' - you should use 'help' from 4.7.8 onward.
Due to a defect in TinyMCE you need to use this code:
help: {
title: 'Help',
items: 'Help'
}
...note the items value starts with H not h. Here is a working example:
http://fiddle.tinymce.com/Nkgaab/1
The incorrect need to use Help will be fixed in a future TinyMCE release at which point you will need to modify the configuration to use help.
Related
I have a problem with Tabulator.js library. I am usig version 4.8, I would like to use context menu feature, but I am unable to make it work. When I use code from documentation (see bellow) browser default context menu is replaced by nothing (nothing shows up). I was not able to find answer to this. Is here someone with similar experience? I have tried three different browsers,but behavior appears to be same in every one of them.
rowContextMenu: [
{
label:"Hide Column",
action:function(e, column){
column.hide();
}
},
{
separator:true,
},
{
disabled:true,
label:"Move Column",
action:function(e, column){
column.move("col");
}
}
]
Unfortunately the example is in error. The rowContextMenu action function does not provide a Column component. It provides a Row component.
If you want to manipulate a column you will need to setup Column Menus. Start by looking here and scroll down to see the other options - http://tabulator.info/docs/4.8/menu#header-menu.
For Rows look at Row Context Menus - http://tabulator.info/docs/4.8/menu#row-context
Unfourtunately, it was all my mistake, I surely did update tabulator js version but forgot to change CSS file, so menu was working right but was shown as div without styling on the bottom.
I satisfy with copy option in contextmenu of hansontable but my users would like to see translated name for this item('копировать'). Is any simple way to rename a contextmenu item in handsontable?
In order to rename the items in your context menu, you need to customize it as described in the documentation.
Following their example, you need to use the parameter 'name' of the "copy" item :
hot3.updateSettings({
contextMenu: {
items: {
"copy": {name: 'копировать'},
}
}
})
You cand find an example here.
I'm a little new to Extjs and I'm trying to figure out the proper way to show/hide elements.
I have the following elements:
layout: 'card',
items:
[
{
xtype: 'Panel1'
},
{
xtype: 'Panel2'
}
]
In my controller I have these references setup:
refs: [
{
ref: 'p1',
selector: 'Panel1'
},
{
ref: 'p2',
selector: 'Panel2'
}
],
Each panel has a form and two buttons at the bottom. Panel 2 is hidden in the beginning. Now I want to show Panel 2 and hide Panel 1. First I tried:
this.getp1().hide();
this.getp2().show();
...and that did nothing. Then, I found this SO question and tried out the following:
this.getp1().getEl().hide();
this.getp2().getEl().show();
which partially worked except that it failed to also show the buttons in Panel2. Am I supposed to get every single element and show() each of them? I must be missing something.
try with:
this.getP1().hide(); //the first letter should be uppercase
this.getP2().show();
The parent panel of my two problem items was of a layout: 'card'. According to the sencha docs on the Card layout only one panel will be shown at a time. Therefore, the proper way to show other items is not via the show/hide function, but rather calling
PARENT_PANEL.getLayout().setActiveItem(n); That was causing my p2 panel to always be hidden and not affected by the show() method.
I need to add a newly-created MenuItem at runtime; so my code currently looks like:
var myMenu = myCmp.query('mymenu')[0]; // retrieve my only Menu object
var menuItem = Ext.create('Ext.menu.Item', {
itemId: 'myItemId', text: 'textGoesHere'
});
myMenu.add(menuItem);
I'm using the add method to add the item; but nothing happens to the menu items though at run-time. Even though debugging shows that the new item has actually been added to the items config of the Menu instance.
Using the remove method however does work, at run-time.
Question: How to make the newly added MenuItem show at runtime? What am I missing?
UPDATE: the above code works; I had a flawed switch statement that was causing another pass through the logic, removing the last created menuItem.
Comment bump up
The OP wrote
OK I track the issue down; I had a flawed switch statement that was
causing another pass through the logic, removing the last created
menuItem. Still I'll mark your answer as correct as it works as well
(by passing the config obj).
This example works:
var menu = Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
floating: false, // usually you want this set to True (default)
renderTo: Ext.getBody(), // usually rendered by it's containing component
items: [{
text: 'icon item',
iconCls: 'add16'
},{
text: 'text item'
},{
text: 'plain item',
plain: true
}]
});
menu.add({text:'test'});
I am not quite sure but according to the API the Menu has panel as default type when you look at the menu but it seems to be menuitem according to the menuitem API This might be a little confusing.
I am trying to create a custom container but can't figure just how to do it.
I need it to look like this:
(don't pay attention that it is RTL, this is only a sketch to get started)
where the orange fonts are the title of the page that I would like to be an H1 element.
It has a simple search and an advance search that pops open when the little arrow next to the search button is clicked.
Questions:
1) What should I extend for that ?
2) How can I implement different advance search forms for different pages ?
3) how can I place a setter for the title that controllers can interact with and manipulate the dom ?
basically any advice will be good as I need a start point.
thanks
There are lots of ways of doing this, but this is what I would do.
I'm not sure about the "advanced forms for different pages" can you go into mre detail about that? Are you looking to autogenerate a search form somehow?
Extend Ext.form.Panel, and use a table layout for the fields
See: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Table
use a "tbar" on the panel instead of setting "title". you can place the search combo, tbfill, then a tbtext for the "title". As a convenience you can override the setTitle function of the panel to manipulate this tbtext field instead of the normal behavior. Something like this:
Ext.define('MyApp.view.MyForm', {
extend: 'Ext.form.Panel',
alias:'widget.myform',
layout:{
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%'
}
}
},
//overridden setTitle
setTitle:function(title){
Ext.getCmp(this.id + "_search_combo").setText(title)
},
defaults:{
xtype:"combo",
//rest of combo config here
},
items:[{
//...
}],
initComponent:function(config){
this.tbar = tbar:[{
xtype:"combo",
//...
id:this.id + "_search_combo"
},{
xtype:"tbfill"
},{
xtype:"tbText",
cls:"my_form_title",
value:this.title||""
}]
//prevent default title behavior
delete this.title
this.callParent(arguments);
}
})
I would suggest you to just extend from Ext.panel.Panel itself, and hijack the dom for all those customized items, add in search bar, etc. If you do not want any of the fancy stuff from Ext.panel.Panel, you can also extend it from Ext.Component, or Ext.container.Container (to contains more components), and even the lowest Ext.util.Observable.
It seems like you might need to extend a few Ext.menu.Menu and defines some different set of input boxes, so that you could benefit from creating a floated menu (if that's what you want). Or if you have time, you can even just extend from Ext.Component and build your own customized component, or even lower, Ext.util.Observable.
The setter? It will be in the extended component in (1) then :)
All of these serve as rough opinions. They could be different depends on your requirement.