Develop Reference

Change Electron's menu item's status dynamically

Like in any standard native application, also my electron's application needs to change the status (enabled/dsabled) of several menu item, based on live usage results.
I am setting up my menu in main.js:
function createWindow () {
...
...
require('./menu/mainmenu');
}
The MenuItem I need to change is defined in mainmenu:
{ label: "Show Colors",
accelerator: 'CmdOrCtrl+1',
enabled: getStatus(),
click() {getWebviewWebContents().send('switchToColors');}
},
where getStatus() is function returning false or true.
All this is not working in Electron, as the menu is created at application start and it can't be modified at all. I believe this is a serious lack, as dynamic menu items are very common (i.e.: menu checkboxes, enabled/disabled, etc).
Is there any workaround for this?

I have fixed this by setting an Id to the menu item,
{ label: "Show Colors",
id: 'color-scale',
accelerator: 'CmdOrCtrl+1',
enabled: getStatus(),
click() {getWebviewWebContents().send('switchToColors');}
},
and getting the menu item with:
myItem = menu.getMenuItemById('color-scale')
Then, when I need to enable/disable it programmatically, I am using:
myItem.enabled = true
or
myItem.enabled = false

The only workaround so far I aware and using is reconstruct whole menu each time menuitem changes. This is not very ergonomics friendly, but works suffeciently enough and doesn't cause lot of overhead.

Here is my solution:
main.js (main process)
const menuTemplate = [{
label: 'Options',
submenu: [
{
label: 'Config',
enabled: false,
click() { //do stuff }
}
]
}];
// Enable menu items when user login. Fetching value from renderer process
ipcMain.on('logged-in', (event, args) => {
if (args !== true) {
return;
}
// Modify menu item status
menuTemplate[0].submenu[0].enabled = true;
// Rebuild menu
const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu);
});

Extjs opening new Ext.window.Window by clicking a button

I'm trying to edit open source program called PartKeepr (v0.1.9). In a specific part of program I want to add a button that opens a new Ext.window.Window. My codes are as following which doesn't work (I'm pretty new in extjs but I'm given a hard task I guess, so I'm open to all advice for where to start learning, I'm just trying to learn from existing codes and apply some things by looking similar parts of available code)
Ext.define('PartKeepr.FindWindow',{
extend:'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton=Ext.create("Ext.button.Button",{
text:i18n("OK")});
this.buttons=[this.okButton];
}
});
{
xtype: 'button',
text: i18n("Find"),
name: 'findButton',
handler: Ext.bind(this.findNumber, this)
}
findNumber: function(){
var j = new PartKeepr.FindWindow();
j.show();
}
Edit: When I press the find button, console giving me the following error: ext-all.js:21 Uncaught TypeError: Cannot read property 'insert' of undefined

You need to call the superclass initComponent method:
Ext.define('PartKeepr.FindWindow', {
extend: 'Ext.window.Window',
constrainHeader: true,
title: i18n("Find Number"),
initComponent: function() {
this.okButton = Ext.create("Ext.button.Button", {
text: i18n("OK")
});
this.buttons = [this.okButton];
this.callParent();
}
});

Kendo UI custom grid popup editor window only opens once

I would like to use a custom window as popup editor of a Kendo UI Grid. Its content will be complex with search fields and a grid to display search results. To do that, I don't want to use the Kendo template mechanism but a real popup window.
While doing tests with custom editor I faced an issue. Even with a very basic and simple scenario (just the create command), I'm only able to open the editor once. The second time I get an error, the editor doesn't show up anymore and the grid becomes empty.
Here is my HTML code :
<div id="main-content">
<div id="custom-window">
</div>
<table id="my-table-grid">
</table>
</div>
The JavaScript part :
function openCustomWindow(e) {
e.preventDefault();
myWindow.center().open();
}
function editorWindowClosed(e) {
myGrid.cancelRow();
}
var myWindow = $("#custom-window").kendoWindow({
modal: true,
resizable: false,
title: "Test",
visible: false,
close: editorWindowClosed
}).data("kendoWindow");
var dummyDataSource = new kendo.data.DataSource(
{
schema : {
model : {
id: "id",
fields: {
postion: { type: "number"},
name: { type: "string"},
}
}
}
});
dummyDataSource.add({postion: 1, name: "gswin"});
var myGrid = $("#my-table-grid").kendoGrid({
dataSource: dummyDataSource,
toolbar: [ {
name: "create",
text: "Create"
} ],
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
},
columns: [
{
field: "postion",
title: "Postion"
},
{
field: "name",
title: "Name"
}
]
}).data("kendoGrid");
The error message in the JavaScript console :
Uncaught TypeError: Cannot read property 'uid' of
undefinedut.ui.DataBoundWidget.extend.cancelRow #
kendo.all.min.js:29ut.ui.DataBoundWidget.extend.addRow #
kendo.all.min.js:29(anonymous function) #
kendo.all.min.js:29jQuery.event.dispatch #
jquery-2.1.3.js:4430jQuery.event.add.elemData.handle #
jquery-2.1.3.js:4116
And finally a jsfiddle link to show what I'm doing. (The popup is empty because I just want to fix the open / close mechanism before going any further)
I don't understand why I get this error, I expected to be able to open / close the popup as many time as I wanted. The default editor popup is working fine.

One of my colleague found the solution (thanks to him).
Actually this piece of code
editable: {
mode: "popup",
window: {
animation: false,
open: openCustomWindow,
}
}
is designed to configure the default popup...
The right way to use a custom popup is the following :
editable :true,
edit: openCustomWindow,
With this approach it's also better to use
function editorWindowClosed(e) {
myGrid.cancelChanges();
}
Instead of
function editorWindowClosed(e) {
myGrid.cancelRow();
}
Working jsfiddle link

Actually the approach in my previous answer solved my issue but is causing another issue. The grid becomes editable but in the default mode (which is "inline").
Doing this
editable: "popup",
edit: openCustomWindow
has fixed this other issue but is now displaying 2 popups.
I finally succeeded to hide the default popup and only show my custom popup but it ended with the orginal issue described in initial question...
Considering all those informations I arrived to the conclusion that working with a custom popup window is definitely not an option. I'll start working with teamplates instead.
Another solution would have been to use a template to override the toolbar with a custom "Add" button and use a custom command for edition. But at this point I consider that too "tricky".

To prevent Kendo UI custom grid popup editor window, define the editable property:
editable:
{
mode: "popup",
window: {
animation: false,
open: updateRowEventHandler
}
} // skip edit property
Then paste preventDefault() at the beginning of the handler:
function updateRowEventHandler(e) {
e.preventDefault(); //

Listen to enable/disable events on Sencha Touch

I'm in the need to listen to a enable/disable event on a container and I've noticed that there's no such event. I tried to listen to it in case it wasn't mentioned in the docs but it definitely doesn't exist.
I google'd around a little and found this..
Ext.define('My.Custom.Container',{
extend:'Ext.Container',
onEnable:function(){
console.log("it's listening");
}
});
It looked promising but it didn't work at all.
Is there any way to listen to these events? I don't want to get jQuery mixed in here as it would be an overkill.

The container xtype from which many components inherit methods does have an event which fires on changing of it's disabled state. This event is called disabledchange and fires every time the container is either enabled/disabled.
In the below code we can see this in action working on a button purely as it gives a visually better demo (since you can immediately see the state) but it inherits the exact same method and event from Container.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.Viewport.add({
xtype: 'container',
padding: 10,
items: [{
xtype: 'button',
text: 'Button To be disabled/enabled',
listeners: {
disabledchange: function(button, value, oldValue, eOpts) {
console.log('changing my disabled state to ' + value);
}
}
}, {
xtype: 'button',
text: 'click to disable/enable above button',
listeners: {
tap: function() {
var isButtonDisabled = Ext.Viewport.query('button')[0].getDisabled();
Ext.Viewport.query('button')[0].setDisabled(!isButtonDisabled);
}
}
}]
});
}
});
Demo: https://fiddle.sencha.com/#fiddle/g46

Ok, I just found an answer to my question.
Ext.define('My.custom.Container',{
extend:'Ext.Container',
config:{
....config....
},
enable: function(){
this.callParent(arguments);
// do something else;
},
disable: function(){
this.callParent(arguments);
// do something else;
}
});
I'm still curious if there's another way around this though. So answers are still welcome.

How to hide an element in TinyMCE popup window?

I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.

Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.