In my Electron App, I can created a Menu template at an external local file and called it menuTemplate.js
The menu works find but I want to be able to open a local file from it, for example about.html
I've tried 'window.open('url here')' but it doesn't understand window ...
Here is the template:
module.exports = [
{
label: 'Electron',
submenu: [
{label: 'Item 1'},
{label: 'Item 2'}
]
},
{
label: 'Actions',
submenu: [
{label: 'Action 1'},
{label: 'Action 2'},
{label: 'Action 3'},
{role: 'toggledevtools'},
{label: 'ClickMe', click () { window.open('url here'); } }
]
}
]
I've tried shell.openExternal and it works but I cannot get an app window to open from here.
How can I do this?
While it is a good idea to separate a template like this into a separate file, you cannot access the scope of the original file there. To solve this problem you have to bring your window from your mainfile (assumed to be called main.js) into your menuTemplate.js.
You could do this for example by creating a method that builds the template on execution. It could look something like this:
menuTemplate.js
module.exports = function(window){
return [
{
label: 'Electron',
submenu: [
{label: 'Item 1'},
{label: 'Item 2'}
]
},
{
label: 'Actions',
submenu: [
{label: 'Action 1'},
{label: 'Action 2'},
{label: 'Action 3'},
{role: 'toggledevtools'},
{label: 'ClickMe', click () { window.open('url here'); } }
]
}
]
}
Now when loading the template in main.js you do not do something like
const template = require('menuTemplate')
but something like
const template = require('menuTemplate')(window),
with "window" being the name of your window variable.
This is what worked for me:
label: 'General',
submenu: [
{label: 'Unidades',
click () { mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './app/fixed_footer.html'),
protocol: 'file:',
slashes: true
})); }
Related
How to implement close , close all and close other tabs features on right click of tab-header in Extjs?
{
xtype: 'tabpanel',
region: 'center',
reference: 'tabPanelRef',
items: [{
tab-1
},{
tab-2
},{
tab-3
}],
}
Here is an example fiddle using the TabCloseMenu plugin. By including the plugin in your tabpanel, the close, close all and close other functions appear by right-clicking on the tab header.
Ext.define('ExampleTabs', {
extend: 'Ext.tab.Panel',
xtype: 'reorderable-tabs',
requires: [
'Ext.ux.TabCloseMenu',
'Ext.ux.TabReorderer'
],
plugins: [
'tabreorderer',
'tabclosemenu'
],
defaults: {
closable: true
},
items: [{
title: 'Tab 0 - fixed',
html: "Cannot reorder or close this",
reorderable: false,
closable: false
}, {
title: 'Tab 1',
html: 'Tab 1'
}, {
title: 'Tab 2',
html: 'Tab 2'
}, {
title: 'Tab 3',
html: 'Tab 3'
}, {
title: 'Tab 4',
html: 'Tab 4'
}],
});
I declared a Navigation view:
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
alias: 'widget.mainNavigationView',
requires: [
'Ext.TitleBar',
'MyApp.view.Home'
],
config: {
tabBarPosition: 'top',
navigationBar: {
id: 'mainNavBar',
ui: 'dark',
items: [{
xtype: 'button',
id: 'logoutUser',
text: 'Logout',
align: 'right',
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}]
},
items: [
{
xtype: 'homePage'
},
]
}
});
And the home page panel:
Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',
config: {
title: 'Menu Principal',
},
items: [
{
store: {
fields: ['listItem'],
data: [
{listItem: 'Item 1'},
{listItem: 'Item 2'},
{listItem: 'Item 3'},
{listItem: 'Item 4'}
]
},
itemTpl: '{listItem}'
}
],
});
My problem is that the list (homePage Ext.Panel's item) is not rendering, I don't know exactly why. Any thoughts from guru guys? I'm just starting with sencha-touch and Ext.
You have a few problems with your home page panel:
The 'items' section is outside the 'config'
The xtype of the list is not set to 'list'
The panel is missing a layout
Ext.define('MyApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.homePage',
config: {
title: 'Menu Principal',
layout: 'fit',
items: [
{
xtype: 'list',
store: {
fields: ['listItem'],
data: [
{listItem: 'Item 1'},
{listItem: 'Item 2'},
{listItem: 'Item 3'},
{listItem: 'Item 4'}
]
},
itemTpl: '{listItem}'
}
]
}
});
I am still at upgrading tinymce version 3 to version 4.
The problem i have is with the usage of the toolbar ui.
I am able to create a listbox with several entries, but i do not know how to add listbox elements after the listbox has been created.
With tinymce3 it was easy to add a list item to a list even after creation of that list.
I do not know how to achieve this with tinymce 4.
What do i need to do? Any suggestions?
Here the code i use to create the listbox:
editor.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
editor.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
editor.irstyle_control = this;
this.value('Some text 3');
}
});
I had a same issue... After visiting many topics on their forum, I came to write something like this
tinymce.PluginManager.add('sampleWithEditable', function(ed, url) {
var me=this, dynamicallyEditable;
function getValues() {
return ed.settings.myKeyValueList;
}
ed.addButton('my_listbox', {
type: 'listbox',
text: 'my_listbox_desc',
icon: false,
onselect: function(e) {
ed.insertContent(this.value());
},
values:[
{text: 'Menu item 1', value: 'Some text 1'},
{text: 'Menu item 2', value: 'Some text 2'},
{text: 'Menu item 3', value: 'Some text 3'}
],
onPostRender: function() {
// Select the third item by default
ed.irstyle_control = this;
this.value('Some text 3');
dynamicallyEditable=this
}});
me.refresh = function() {
if(dynamicallyEditable.dynamicallyAdded){
dynamicallyEditable.dynamicallyAdded.remove();
dynamicallyEditable.dynamicallyAdded = null;
}
dynamicallyEditable.settings.values = dynamicallyEditable.settings.dynamicallyAdded = getValues();
};
}
Then From the ajax success method
tinyMCE.activeEditor.settings.myKeyValueList = [{text: 'text_here', value: 'value_there'}];
tinyMCE.activeEditor.plugins.sampleWithEditable.refresh();
I'm quite new to using Sencha Touch. I'm creating an app that has a sidebar and a map pane and when the user clicks on the Show Map button in the sidebar area the map is supposed to center on that location. Where I'm having an issue is that I'm unsure of how to access the {lat} and {lon} properties that are in the tpl variable from the handler function. My apologies if this is a trivial question, but it has me stumped.
Ext.define('Admin.view.Details',
{
extend: 'Ext.Panel',
xtype: 'details',
config:
{
styleHtmlContent: true,
scrollable: 'vertical',
title: 'Individual',
tpl:
[
'Account Number: {comid}',
'<br />',
'Address: ',
'{address} <br />',
'{lat},{lon}',
],
items:
[
{
title: 'Utilities',
items:
[
{
xtype: 'selectfield',
label: 'Utility Type',
options:
[
{text: 'Electricity', value: 'U1'},
{text: 'Water', value: 'U2'},
{text: 'Gas', value: 'u3' },
],
id: 'utilityType',
},
{
xtype: 'selectfield',
label: 'Coverage Area',
options:
[
{text: 'Subdivision', value: 'a1'},
{text: 'Zipcode', value: 'a2'},
{text: 'County', value: 'a3' },
],
id: 'areaType',
},
{
xtype: 'button',
text: 'Show Map',
ui: 'round',
padding:3,
margin:10,
id: 'mapsBTN',
handler: function() {
olMap.setCenter(new OpenLayers.LonLat(lon, lat).transform
(
new OpenLayers.Projection("EPSG:4326"),
olMap.getProjectionObject()
), 16);
}
},
]
},
]
}
});
You need to either implement de handler in your view's controller by adding references to your view and your button and then add a listener for the itemtap event of the button OR implement it in the constructor method of the view :
Ext.define('Admin.view.Details',{
extend: 'Ext.Panel',
xtype: 'details',
config:{
...
},
constructor: function() {
this.callParent(arguments);
var me = this;
this.child('#mapsBTN').setHandler(function() {
me.getTpl(); // Here's your tpl config object
});
}
});
Hope this helped
You can get any variable inside config object by getter.
this.getTpl(); //returns tpl variable
Also note that this must point out to your Admin.view.Details view.
First of all, Im new at ExtJS. I wanted your help to let me know the best way to obtain a tree menu with n recursive items in it.
In example:
FOLDER
..FOLDER
....ITEM
....FOLDER
......ITEM
......ITEM
....FOLDER
...
Im following the best practises proposed by Sencha. I was able to do a tree menu with one level, but when trying to do it for n levels, it fails (in fact, the app works but shows infinite nodes of 1st level). Clearly the issue is the model definition of my menu item, see:
Ext.define('Dashboard.model.MenuItem',{
extend: 'Dashboard.model.AbstractMenuElement',
fields:
[
{name: 'content', type: 'string'},
{name: 'skeletonFlag', type: 'string'},
{name: 'fatherId', type: 'int'}
],
associations:
[
{type: 'hasMany', model: 'Dashboard.model.MenuItem', name: 'children', mapping: 'items'}
]
});
So this model recursively creates infinite nodes. But... do you know how should i model my menu item in order to achieve the recursive menu?
Thanks!
To display a tree-like structure in Ext JS, I think your best bet is to use Ext.model.TreeModel, Ext.model.TreeStore in conjunction with Ext.tree.Panel.
Here is an simple example to match the structure you mentioned in the question:
Ext.create('Ext.tree.Panel', {
store: Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root Folder',
expanded: true,
children: [
{text: 'Folder 1', children: [
{text: 'Item 1', leaf: true}
]},
{text: 'Folder 2', expanded: true, children: [
{text: 'Item 2', leaf: true},
{text: 'Item 3', leaf: true}
]},
{text: 'Folder 3', children: []}
]
}
}),
renderTo: Ext.getBody()
});
You can view this example on Plunker.