I have an extjs menu, in which, upon clicking a button, a colorPicker is opened.
When a color is selected, onColorPickerSelect: function(colorpicker, color, eOpts) springs into action. How do I select the button element in this function, taking the value of the colorpicker variable as my start point?
items: [
{
xtype: 'button',
itemId: 'color1',
style: 'background-color:#fc0;',
text: '1. Farbe',
menu: {
xtype: 'colormenu',
listeners: {
select: {
fn: me.onColorPickerSelect,
scope: me
}
}
}
}
]
As I answer in your previous question, use var button = colorpicker.up('button');
onColorPickerSelect: function(colorpicker, color, e0pts) {
var button = colorpicker.up('button');
button.getEl().setStyle('background-color', '#' + color);
}
Related
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙ or ...) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
In TinyMCE 4, I'm looking to create a dropdown menu (whether as a toolbar button or in a menu) containing a list of values that should be inserted at cursor position simply by selecting them in the dropdown.
I've tried playing with the template plug-in, which kind of works, but it's too heavy and complex to use for what I need (it doesn't create a dropdown, instead it opens a popup which lets you preview your template, and I really don't need all that).
Is there a simpler way to do that? I don't need text replacement, class or date insertion, preview in a popup, or any of that advanced stuff. Just insert a static text value at cursor position.
Here is a TinyMCE Fiddle that shows hw to do what you want:
http://fiddle.tinymce.com/orgaab/1
The key code is this:
setup: function (editor) {
editor.addButton('custombutton', {
type: 'listbox',
text: 'Custom Listbox',
icon: false,
onselect: function (e) {
editor.insertContent(this.value());
},
values: [
{ text: 'Bold Text', value: ' <strong>Some bold text!</strong>' },
{ text: 'Italic Text', value: ' <em>Some italic text!</em>' },
{ text: 'Regular Text', value: ' Some plain text ...' }
]
});
}
If you want to add stuff to a Menu instead (based on your follow up comment) you can do this:
http://fiddle.tinymce.com/orgaab/4
The key code in this update is:
editor.addMenuItem('custommenuoptions', {
separator: 'before',
text: 'Custom Menu Options',
context: 'insert',
prependToContext: true,
menu: [
{ text: 'Bold Text', onclick: function() {editor.insertContent(' <strong>Some bold text!</strong>')} },
{ text: 'Italic Text', onclick: function() {editor.insertContent(' <em>Some italic text!</em>')} },
{ text: 'Regular Text', disabled: true, onclick: function() {editor.insertContent(' Some plain text ...')} }
]
});
I'm new in NativeScript, and I'm playing with maps, using Mapbox.
I want add markers, programmatically from a function when tap a buttom, to map.
XML
` <Button text="GET" tap="getRequest" /> <<<-- BUTTON!
<ContentView>
<map:MapboxView
accessToken= token
mapStyle="streets"
zoomLevel="13"
showUserLocation="false"
disableRotation= "true"
disableTilt="false"
mapReady="onMapReady">
</map:MapboxView>
</ContentView>`
JS
`function onMapReady(args) {
args.map.addMarkers([
{
id: 1,
lat: -35.30505050,
lng: -47.56263254,
title: 'Company 1', // no popup unless set
subtitle: 'Subt 1',
iconPath: 'markers/green_pin_marker.png',
onTap: function () { console.log("'Nice location' marker tapped"); },
onCalloutTap: function () {
console.log("'Nice location' marker callout tapped");
console.log(lati + long);
}
}
]).then(
function (result) {
console.log("Mapbox addMarkers done");
},
function (error) {
console.log("mapbox addMarkers error: " + error);
})
}
exports.onMapReady = onMapReady;`
That code works fine, the marker ID 1 appears on map.
My question is: how can add others markers from a function that responde to tap button:
exports.getRequest = function () {
console.log("BUTTON TAPPED!");
args.map.addMarkers([
{
id: 2,
lat: -35.30586500,
lng: -47.56218500,
title: 'Company 2', // no popup unless set
subtitle: 'Subt 2',
iconPath: 'markers/green_pin_marker.png',
onTap: function () { console.log(" marker tapped"); },
onCalloutTap: function () {
console.log("marker callout tapped");
console.log(lati + long);
}
}
]).then(
function (result) {
console.log("Mapbox addMarkers done");
},
function (error) {
console.log("mapbox addMarkers error: " + error);
})
}
When tap button, console show message BUTTON TAPPED!, but no new mapker ID 2 on map.
I'm doing bad or forgeting something?
Well, it's in the readme of the plugin repo: https://github.com/EddyVerbruggen/nativescript-mapbox/tree/26019957e4e3af3e737d7a44c845f5d5b1bfb808#addmarkers
So here's a JavaScript example, but that repo also has a TypeScript-based demo app with an 'add markers' button that you can check out:
var mapbox = require("nativescript-mapbox");
var onTap = function(marker) {
console.log("Marker tapped with title: '" + marker.title + "'");
};
var onCalloutTap = function(marker) {
alert("Marker callout tapped with title: '" + marker.title + "'");
};
mapbox.addMarkers([
{
id: 2, // can be user in 'removeMarkers()'
lat: 52.3602160, // mandatory
lng: 4.8891680, // mandatory
title: 'One-line title here', // no popup unless set
subtitle: 'Infamous subtitle!',
// icon: 'res://cool_marker', // preferred way, otherwise use:
icon: 'http(s)://website/coolimage.png', // from the internet (see the note at the bottom of this readme), or:
iconPath: 'res/markers/home_marker.png',
selected: true, // makes the callout show immediately when the marker is added (note: only 1 marker can be selected at a time)
onTap: onTap,
onCalloutTap: onCalloutTap
},
{
// more markers..
}
])
I also cannot use Mapbox as a const/var... or do anything programmatically. I get undefined is not a function, yet Mapbox to log yields the module and its objects. I can see the appropriate functions under prototype:Mapbox etc.
Only declaring the map in XML and utilizing the MapOnReady function works for me.
Update:
I stumbled upon this thread from {N} discourse that helped me understand:
https://discourse.nativescript.org/t/adding-mapbox-to-layout-container/4679/11
Basically the programatic way of building the map still does not allow interaction with the map after it has been rendered. You just declare all the map options as shown in the git example and then still use onMapReady as your function to add markers, polylines etc... you can still setup map listeners of course.
In Sencha in a child window I obtain an id of an image, how can I then pass the image id to a text field in a parent window. I go to the child window with a button click, and would like to display the id of the chosen image in a text field above the button.
Thanks.
You would pass a textfield reference to the window during window creation, and when the button is clicked, you use that reference:
xtype: 'textfield',
},{
xtype:'button',
text: 'Get Image'
handler: function(btn) {
Ext.create('Ext.window.Window',{
textfieldReference: btn.previousSibling('textfield'),
buttons:[{
text: 'OK',
handler: function(okBtn) {
okBtn.up('window').textfieldReference.setValue(imageId);
}
}]
})
}
I am new to sencha touch.
I have a problem with the button tap event. Actually I have a button with a background image that is declared in the cls property of Button:
Ext.define('app.view.common.PageHeader', {
extend: 'Ext.Container',
xtype: 'pageHeader',
config: {
items: [
{
xtype: 'button',
left: 10,
top: 10,
baseCls: 'null',
cls: 'btn_back', //with background:url('btn_img.png')
listeners: {
tap: function () {
console.log('button tapped...');
//history.back();
this.removeCls('btn_back');
this.addCls('btn_press');
},
release: function () {
console.log('button released..');
}
}
}
]
}
});
Now I just want to change the background image of the button when the button is tapped using removeCls() and addCls().
But from Sencha documentation I have not found any event like that.
So is there and way to do this?
Just remove all listeners and handlers you have written. It's simply the pressedCls config for your button. For example:
pressedCls: 'css_properties_when_the_button_is_pressed'
Hope this helps.