is there some event fired when selecting a point on a map?
Currently I am using this
series.listen('pointClick', function(event) {
}
but to fire this event you have to double click on a point. the first click selects a point and the second click fires this event.
how can I listen to the "point select event"?
series.listen('pointSelect', function(event) {
}
does not work.
Thanks!
Both, pointClick and pointSelect events should work. We have identified this as a bug and will fix it in release 7.13.0, ETA: End of Feb 2017.
For now, please use pointsSelect event. It also works for multi-series chart.
map.listen('pointsSelect', function(e) {});
http://jsfiddle.net/gpd5v5bz/3/
Related
I know this seems simple, and the first instinct is going to be to suggest something like preventDefault in mousedown event. That is not what this question is.
In React, I just want to have an input that when Left Clicked receives its focus as normal, and when Right Clicked does not receive focus.
I can find no combination of event handlers or event manipulation that will allow this (in chrome at least). I'm tempted to put event handlers outside of the React DOM and get surgical with disabling higher up in the capture phase before react gets involved, but I'm just hoping I'm missing something and somebody can see something obvious I'm missing.
Here's various combinations of "everything" I've thrown at it. Synthetic event standard prevention, nativeEvent prevention, every variation of capture and bubble phase, etc. Event with all of the event handlers below, I can prevent Left Click from setting focus, but still Right Click sets focus on the input.
//React v16.12.0
function killEvent (e: React.SomeEvent<HTMLInputElement>): void {
e.nativeEvent.stopImmediatePropagation();
e.nativeEvent.preventDefault();
//[Neither above nor below seems to work]
e.preventDefault();
e.stopPropagation();
}
<input
onContextMenuCapture={killEvent}
onContextMenu={killEvent}
onClick={killEvent}
onClickCapture={killEvent}
onAuxClick={killEvent}
onAuxClickCapture={killEvent}
onPointerDown={killEvent}
onPointerDownCapture={killEvent}
onMouseDownCapture={killEvent}
onMouseDown={killEvent}
onFocusCapture={killEvent}
onFocus={killEvent}
/>
here is my solution
Capture on mouse down
<input onMouseDown={this.killEvent} />
then check which button is clicked
killEvent = e => {
if (e.nativeEvent.which === 3) {
e.nativeEvent.preventDefault();
}
};
I made a Fiddle test case to reproduce my problem: the select event is fired twice. Even the selectionchange does so. But the cellclick is fired only once.
I use ExtJS5.1.1 GPL.
NB: the Load button (on the left) has to be clicked first.
This looks like a bug...
An ugly workaround can be using buffer. You can set the listener like this:
select: {
buffer: 1,
fn: function(treepanel, record, index) {
console.log('select', index);
}
}
The listener is added to the events twice, this is a bug in Sencha Framework that relates to the locked/normal treegrid and is fixed in 5.1.2. It seems as if the listener is added once to the listener object of the locked grid and once to the listener object of the normal grid, and because both grids use the very same object, that object will contain the listener twice.
A quick fix seems to be to remove the select listener from the listener config and add it to one of the grids only:
Ext.ComponentQuery.query('viewport treepanel[isLocked=true]')[0].on('select', function(treepanel, record, index) {
console.log('select', index);
});
This is related to ExtJs 4.2 Charts.
I am stuck where i need to make selection of multiple columns in a column chart only when a user press ctrl key + column selection with mouse click. So, i couldn't find how to capture control key press event in itemclick event of chart.
Please send in your suggestions...
This is a shot at a direction you might take and not a definitive answer.
You might look at adding a couple listeners to the Panel or Viewport you are working with, add a keydown event and the keyup event, not sure if that will work, you might go so far as to add it to the DOM models window too. You see the problem I am seeing here is that you have to have focus first on something, and you will probably at least have the focus of the window, where if you, put this listener on the actual chart you have to focus there by clicking on the chart first and then selecting the key and then clicking again, kind of a lot of actions I would think and not intuitive.
Then set a global variable to true on the key press down and back to false on the key press up.
Then in the itemmousedown event that you also create on the charts Series so you can read the variable and use it as you intend.
here is what the listener should look like
series: [{
type: 'column',
...
listeners: {
itemmousedown: function(item, eOpts) {
.... // get your global variable here.
console.log(item);
console.log(eOpts);
}
},
I found a solution it is working fine but its a kind of workaround.
Here is the code snippet...
var bIsControlkeyPressed=false;
function setCtrlKey(event){
if (event.ctrlKey) {
bIsControlkeyPressed=true;
}else{
bIsControlkeyPressed=false;
}
alert(bIsControlkeyPressed)
}
<body onmousedown = "setCtrlKey(event)">hello</body>
When you click anywhere on page (body part i.e. 'hello' in this case), this code will set the global flag to true if ctrl key is also pressed else false is set. I know there are other ways this can be done but this approach works with IE8 also :)
My question is similar to this one: How to prevent itemclick event on check change in Ext Js Tree.
However, it does not provide a solution for my problem. So, my question is: how can I remove a listener before an event takes place? The problem is that I have three listeners in my tree, and on checkchange I want to prevent the itemclick event. But everything executes in an unexpected order. The code is:
checkchange:function(node,check){
alert("1");
},
itemclick:function(view,rec,item,index,eventObj){
alert("2");
},
render:function(){
Ext.getCmp('mytree').on('checkchange',function(node,check){
alert("0");
Ext.getCmp('mytree').removeListener('itemclick',this);
});
}
When I check a node in my tree, I first see alert(2), then alert(1) and only then alert(0). So, the code which should remove the listener happens at the very end and I want the opposite.
Edit:
I do not want to completely remove the itemclick event. The more appropriate word is to "stop" an event, to prevent it from happening.
Edit:
The solution is to do e.getTarget() check inside the itemclick event. So, my code inside the itemclick event now looks like this:
itemclick:function(view, record, item, index, e, eOpts){
if(e.getTarget('span',1,true)){
// all other code which should take place in case
// itemclick event does not come from checkbox element
}
}
Firstly, it's important to understand the order events are fired:
render
itemclick
checkchange
Secondly, it's important to understand what's happening within the function you've defined for the render event.
What the code is doing is adding additional code to that which you've already defined for the checkchange function, so checkchange when it runs will alert 1 then 0 (what you are seeing). In addition, it will then remove the itemclick listener. This will mean that the second time you click a node, it should behave differently.
If you want to suppress the itemclick event immediately upon render, you should un-nest the removeListener call, thus:
render:function(){
this.removeListener('itemclick',this).on('checkchange',function(node,check){
alert("0");
});
}
Alternatively, you can simply remove the itemclick event listener itself.
If you want to change the way the itemclick event is handled, you can also intercept the event itself, using one of these methods:
itemclick:function(view,rec,item,index,eventObj){
eventObj.preventDefault(); //or
eventObj.stopPropagation(); //or
eventObj.stop();
},
It's not clear what you're trying to accomplish, however.
I am using Backbone and Backbone.ModelBinder.
I have a bunch of text fields that are bound via BackboneModelBinder. Everything works as expected however when I make a change to a text field and I don't unfocus the field first (click off the input field) before hitting the SAVE button, I have to hit the Save button twice -- once to unfocus the fields, and then a second time to actually fire the save button handler (which should have fired the first time)
(Save is a standard html button with a backbone event bound to it).
Does anyone have any knowledge of why this might be?
I hope this made sense :|
Thanks for any help or direction
-Kirk
That's because ModelBinder by default set the new value to the model's attributes on "blur" or "change" events (it dependes on the input's type). You can modify this behavior by changing the source code, adding keyup as binding event in those two methods:
_bindViewToModel:function () {
$(this._rootEl).delegate('', 'change keyup', this._onElChanged);
// The change event doesn't work properly for contenteditable elements - but blur does
$(this._rootEl).delegate('[contenteditable]', 'blur keyup', this._onElChanged);
},
_unbindViewToModel: function(){
if(this._rootEl){
$(this._rootEl).undelegate('', 'change keyup', this._onElChanged);
$(this._rootEl).undelegate('[contenteditable]', 'blur keyup', this._onElChanged);
}
},