I have an app (based on a magazine tute) with a menu that works fine on Windows and Ubuntu, but I have trouble getting the app level custom menu items to appear on MacOS. These menu items are File and View entries.
I have pored over the electron API docs and I see the special considerations for OSX, especially about the "role" attribute, but I am still stymied here. I am able to create menu items on OSX for the types of things listed in the API documents (such as "Edit" menu items using role, from a Renderer script) but not for my app.
Could my menu items be colliding with reserved "File/View" menu item names in the mac menu?
Here's the snip with my menu template string:
var SendEvent = function(name) {
return function() {win.webContents.send(name);};
};
var template = [
{label: 'File', submenu: [
{label: 'New', click: SendEvent('file-new')},
{label: 'Open', click: OpenFile},
{label: 'Save', click: SendEvent('file-save')},
{label: 'Save As', click: SendEvent('file-save-as')},
{label: 'Close', click: SendEvent('file-close')},
{type: 'separator'},
{label: 'Quit', click: function() {app.quit();}}
]}, {label: 'View', submenu: [
{label: 'HTML/Markdown', click: SendEvent('view-toggle')}
]}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
Are there any other examples out there of apps with custom File and View menu actions that work on macOS?
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
should be called within createWindow() function:
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600
})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index_menus.html"),
protocol: "file:",
slashes: true
}))
mainWindow.on("closed", () => {
mainWindow = null;
});
var template = [
{label: 'File', submenu: [
{label: 'New', click: SendEvent('file-new')},
{label: 'Open', click: SendEvent('file-open')},
{label: 'Save', click: SendEvent('file-save')},
{label: 'Save As', click: SendEvent('file-save-as')},
{label: 'Close', click: SendEvent('file-close')},
{type: 'separator'},
{label: 'Quit', click: function() {app.quit();}}
]},
{label: 'View', submenu: [
{label: 'HTML/Markdown', click: SendEvent('view-toggle')}
]}
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));
}
If you use "File" menu, it will be placed under YourAppName menu (the first one) on macOS.
Related
I'm using CkEditor in a Laravel 5 project.
In the config.js under bower_component/ckeditor/ I used the following code:
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here.
// For complete reference see:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
// The toolbar groups arrangement, optimized for two toolbar rows.
config.toolbarGroups = [
{name: 'clipboard', groups: ['clipboard', 'undo']},
{name: 'editing', groups: ['find', 'selection', 'spellchecker']},
{name: 'links'},
{name: 'insert'},
{name: 'forms'},
{name: 'tools'},
{name: 'document', groups: ['mode', 'document', 'doctools']},
{name: 'others'},
'/',
{name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
{name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi']},
{name: 'styles'},
{name: 'colors'},
{name: 'about'}
];
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.FormatOutput = false;
config.allowedContent = true;
};
Also, in the js in the related page, I used the below code:
$(function () {
CKEDITOR.replace('editor2', {
allowedContent: true,
});
});
In the HTML, I used the following code:
<textarea name="content" rows="10" cols="80" id="editor2"></textarea>
In the plugins folder under the bower_component/ckeditor/plugins, I see the "iframe" folder is exist. However, I can't see the iframe icon in the ckeditot toolbar. I configured "allowedContent" as true as mentioned above. Here is the screen grab:
What is the issue?
I have found the solution.
Open the config.js under bower_component/ckeditor and write the following code:
config.extraPlugins = 'iframe';
and voila! you will see the iframe icon on the ckeditor toolbar.
i wan't to add context Menu when i right click on object 3D in scene
as this java script code
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"edit": {name: "Edit", icon: "edit"},
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
"delete": {name: "Delete", icon: "delete"},
"sep1": "---------",
"quit": {name: "Quit", icon: "quit"}
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
this code i use it to create menu but can't find idea to make it relative to 3D object in scene
You need to convert 3d coordinates to 2d screen (projected) coordinates.
Please have a look at this post for details and also the answer here.
I have the following button within a Panel within a view:
items: [
{
xtype: 'button',
text: 'SEND',
ui: 'confirm',
docked: 'bottom',
handler: function(){
view.push('TouchNuts.view.Transactions',{
title: 'New views title',
html: 'Some content'
});
}
}
]
I would like to navigate to a page that consists of a list 'TouchNuts.view.Transactions' when I click it. Any ideas?
view needs to be a reference to your NavigationView. One way of getting that reference is by giving it an id and then using Ext.getCmp to fetch the component:
{
xtype: 'navigationview',
id: 'my-id',
items: [...]
}
Ext.getCmp('my-id');
I accidentally deleted this post before, so I am resubmitting :\
I'm new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in 'center region' > chart]
The reason why I'm nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user's selection.
While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws 'Uncaught TypeError: Cannot call method 'substring' of undefined', and Aptana gives me a 'name is undefined' namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I'm a little lost in where to start looking for the problem.
My base application file is as follows:
Ext.application({
name: 'Chart',
appFolder: 'chart',
controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',
'chart.oil.Spreads'],
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
xtype: 'commoditycontrol',
}, {
region: 'east',
xtype: 'sidebarnavigation',
}, {
region: 'center',
xtype: 'oilbase',
}]
});
},
});
The 'oilbase' view is simply a panel that imports the chart and chart toolbar view (in this case I've left the toolbar view out)
Ext.define('Chart.view.base.Oil', {
extend: 'Ext.panel.Panel',
alias: 'widget.oilbase',
name: 'oilbase',
layout: 'fit',
items: [{
xtype: 'oilspreads'
}]
});
And here's the chart view 'oilspreads'
Ext.define('Chart.view.chart.oil.Spreads', {
extend: 'Ext.chart.Chart',
alias: 'widget.oilspreads',
name: 'oilspreads',
layout: 'fit',
store: 'Chart.store.oil.Spreads',
config: {
style: {
background: '#333333'
},
},
axes: [
{
title: 'Close',
type: 'Numeric',
position: 'left',
fields: ['close'],
minimum: 0,
maximum: 100,
cls: 'axis'
},
{
title: 'Month',
type: 'Category',
position: 'bottom',
fields: ['month'],
cls: 'axis'
}
],
series: [
{
type: 'line',
xField: 'month',
yField: 'close'
}
]
});
Again, everything works fine if I reference the chart view in the application rather than the 'oilbase' empty panel. If I reference the default panel xtype, everything works as well.
Is nesting panels simply discouraged? My gut feeling is that I'm simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.
Thanks
For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.
I have weird situation that extjs 4 always puts last word of custom error message in new row, and effectively hides it. I tried shortening message, but always last word goes to new line. This happens in Firefox 7.0.1 (firebug turned off), not in Chrome, Opera, Safari.
Default message text is displayed correctly. My error message has no strange letters or symbols.
I tried escaping white characters, putting nobr tags etc... but nothing works.
How to prevent this behavior?
I have no any css or any other styling applied. Here is code from view:
this.items = [{
waitMsgTarget: 'dailyReport',
xtype: 'form',
url: 'php/dailyReport.php',
items: [{
margin: 10,
xtype: 'datefield',
name: 'reportDate',
fieldLabel: 'Report for',
format: 'd.m.Y.',
altFormats: 'd.m.Y|d,m,Y|m/d/Y',
value: getCorrectDate(),
disabledDays: [0]
},
{
margin: 10,
xtype: 'checkboxgroup',
fieldLabel: 'Report by',
columns: 2,
vertical: true,
allowBlank: false,
blankText: 'Choose at least one.',
items: [{
boxLabel: 'pos',
name: 'rb',
inputValue: '1',
checked: true
},
{
boxLabel: 'seller',
name: 'rb',
inputValue: '2',
checked: true
}]
}]
}];
'Ctrl' + '+' was reason. My view in Firefox was zoomed in, but I didn't notice it until today. After I returned it to normal zoom level 'Ctrl' + '0' everything works and shows up fine. Silly me, it took me 2 weeks to realize this.