I'm using OpenLayers and ExtJS together. In a map, I have popups that appear when you interact with the map. The HTML for the these popups contains a container that I use to create an extjs button with a menu.
When you close the popup or click out of the menu/button, the menus don't disappear. Once the button is clicked to show the menu, it remains visible! To resolve, I can write some code to manually destroy it - but I'm only firing this code on the popup close. Does anyone know why the button w/ menu is acting this way?
I init the button and menu when a popup is created on the map:
Map.popupMenu = new Ext.menu.Menu({
id: "ChangesGridContextMenu",
items: [{ .... }]
});
Map.popupButton = new Ext.Button({
id: "popupActions",
text: "Actions..",
menu: Map.popupMenu
});
When the popup is closed I destroy the extjs components:
if (Map.popupMenu !== null) {
Map.popupMenu.destroy();
Map.popupMenu = null;
}
if (Map.popupButton !== null) {
Map.popupButton.destroy();
Map.popupButton = null;
}
Related
I am using the Jodit editor in my React application.
Now I need a custom button in the Toolbar to insert text-snippets into the editor.
This works all fine.
I got a Button with a custom Icon and on its right side there is a chevron that opens and collapses my dropdown.
The thing I can't figure out is, how can I make my custom button more like the standard paragraph button. The paragraph button also has the chevron but it doesn't matter where it is clicked, it always opens the dropdown.
So my extraButton-Config contains this:
{
name: "Textbausteine",
icon: "dots",
list: textModules.map((module) => module.name),
tooltip: "Textbaustein einfügen",
exec: (
jodit: IJodit,
_current: Nullable<Node>,
options: {
button: IToolbarButton;
control: IControlType<IJodit>;
originalEvent: Event;
},
) => {
if (options.control.args) {
const moduleIndex = options.control.args?.at(1);
jodit.selection.insertHTML(textModules[moduleIndex].content);
}
else {
// open dropdown
}
},
}
I tried jodit.selection.expandSelection() but nothing happens.
Anyone know how I can open a dropdown in the toolbar?
This code is executed when clicking on menu item:
var objectTabPanel = Ext.create('App.view.ObjectTabPanel');
var tab = Ext.getCmp('mainTabPanel').add(objectTabPanel);
But if I click on the menu item again, the tabpanel is created again.
How to create a condition? If the tabpanel is created and opened, then switch to it. If the tabpanel is not created and is not open, then create and switch to it.
I want the behavior such as, for example, in SublimeText:
You can use Ext.getCmp('componentID').show():
...
onObjectsClick: function(item, e, eOpts) {
if(!Ext.getCmp('objectsPanel')) {
var objectsPanel = Ext.create('AMS.view.ObjectsPanel');
Ext.getCmp('mainTabPanel').add(objectsPanel);
}
Ext.getCmp('objectsPanel').show();
},
...
"kendoContextMenu" is one of control from Telerik suit. I am trying to attach it with Kendo Scheduler control.
Below is the code to render scheduler and menu
Part of it taken from Kendo sample site
<div id="example">
<div id="scheduler"></div>
<ul id="contextMenu"></ul>
</div>
Here is Context Menu Initialization
$("#contextMenu").kendoContextMenu({
filter: ".k-event, .k-scheduler-table td",
target: "#scheduler",
select: function(e) {
var target = $(e.target);
if (target.hasClass("k-event")) {
var occurrenceByUid = scheduler.occurrenceByUid(target.data("uid"));
} else {
var slot = scheduler.slotByElement(target);
}
},
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit Title" : "Block";
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
});
});
The above code adds only ONE item in context menu and click event directly fires up. I would like to have multiple items in a context menu and each should have its own event so that I can use them as it clicked.
Below image shows right click behavior, where it shows only Block in a menu
I am trying to get menu as below- which has multiple items and have its own click events
I am trying like below by appending text but it's seems to be wrong way to do and it can not have separate click event.
open: function(e) {
var menu = e.sender;
var text = $(e.target).hasClass("k-event") ? "Edit event" : "Add Event";
text = text + "|" + "Cancel"
menu.remove(".myClass");
menu.append([{text: text, cssClass: "myClass" }]);
}
Kindly help
I'm afraid you're appending it wrong. By concatenating "| Cancel" you're not adding a new item, but adding text to the existing one.
Try creating a new object and append it with append():
menu.append([{text: "Cancel", cssClass: "cancel-opt" }]);
Then you check by the class inside the select event:
if (target.hasClass("cancel-opt"))
I am trying to create a menu for a mac node-webkit app. I am trying to append a preferences menu item to the first/root menu(app name > about, preferences, etc). I have not been able to figure out how to access the menus that the .createMacBuiltin(); function creates. I have only been able to create a new custom menu. Has anyone figured out how to do this. See Slack's mac app for an example. Here is my code so far.
var gui = require('nw.gui');
// Create menu container
var Menu = new gui.Menu({
type: 'menubar'
});
Menu.createMacBuiltin("Example App");
Menu.append(
new gui.MenuItem({
label: 'Preferences',
click : function () {
$('#preferences').modal('toggle');
}
})
);
gui.Window.get().menu = Menu;
Thanks for the help.
I solved this with the following code. It was just a matter of rooting around and finding the right menu to append or insert to. I used the menu to open a modal that has user preferences in it.
var gui = require('nw.gui');
// Create menu container
var Menu = new gui.Menu({
type: 'menubar'
});
//initialize default mac menu
Menu.createMacBuiltin("MyApp");
// Get the root menu from the default mac menu
var rootMenu = Menu.items[0].submenu;
// Append new item to root menu
rootMenu.insert(
new gui.MenuItem({
label: 'Preferences',
click : function () {
$('#preferences').modal('toggle');
}
})
);
// Append Menu to Window
gui.Window.get().menu = Menu;
In an XML view I have an expandable Panel. Here, I can expand the panel only with clicking the arrow icon.
Is there a way to make the icon AND the whole Panel clickable?
Here's a snippet for a simple Panel:
http://jsbin.com/wamutodubu/1/
You can just add a delegate. Add the id "panel" to your panel and this to your controller:
onInit: function() {
var panel = this.byId("panel");
panel.addDelegate({
onclick: function(oEvent) {
if (oEvent.target === panel.$().find(".sapMPanelHdr").get(0)) {
panel.setExpanded(!panel.getExpanded());
}
}
});
I changed your JSBin: http://jsbin.com/qetaxexoli/1/edit?html,js,output