I'm working on a Sencha touch app. Inside a listener, I set up a panel with hideOnMaskTap set to true (based on code from the floating components documentation):
onTap: function() {
Ext.Viewport.add({
xtype: 'panel',
modal: true,
hideOnMaskTap: true,
...
}
This works as expected. Apart from hiding the panel, I would like to call a function when the user taps on the mask. After looking at the sencha documentation and having googled many things, I haven't been able to find a way to make such a call.
Any pointers would be greatly appreciated.
When modal:true and hideOnMaskTap:true, once you click on the mask, the component will be hidden. This will fire the hide event.
hide( Ext.Component this, Object eOpts )
Fires whenever the Component is hidden
Write your code in the handler for this event.
Related
I'm trying to build a mobile small application using v-expansion-panels to display a list.
The idea is that when the user adds a new item in such list it will open the new panel and scroll down to such new panel.
I found a goTo() method in the $vuetify variable, unfortunatly the v-expansion-panels transition (the "opening") take some time and the goTo() won't completely scroll down because of the scrollbar height changes.
So from my understanding I need to detect the end of the transition (enter/afterEnter hook).
Per the vuetifyjs documentation, I could hope to have a "transition" property on my component. (Which isn't the case anyway). But such property is only a string so I can't hook into it.
My other idea is to, somehow, find the transition component and hook into it. Unfortunatly I have trouble understanding el/vnode and the way vuejs is building is tree like the vue-devtool show and I can't get the transition component. When debugging (in the enter hook callback of the transition) it is like the component/el/vnode has a parent but isn't the child of anybody.
Is there a way to do what I'm looking for?
Here is a jsfiddler of what I currently do: https://jsfiddle.net/kdgn80sb/
Basically it is the method I'm defining in the Vue:
methods: {
newAlarm: function() {
const newAlarmPanelIndex = this.alarms.length - 1;
this.alarms.push({title: "New line"});
this.activePanelIndex = newAlarmPanelIndex;
// TODO:
this.$vuetify.goTo(this.$refs.alarmPanels[newAlarmPanelIndex]);
}
}
Firstly you should open manually panel and then use goTo with a timeout.
It works for me, just give some time to a panel to open.
<v-expansion-panels v-model="alarmPanels">
<v-expansion-panel>
<div id="example" />
</v-expansion-panel>
</v-expansion-panels>
this.alarmPanels.push(0); // Use index of expansion-panel
setTimeout(() => {
this.$vuetify.goTo(`#${resultId}`);
}, 500);
I need to disable the default context menu that pops up on selecting text inside a webview, and instead handle this event from javascript side.
I added the following code in RNCWebview.m after some initial research,
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
NSLog(#"From native side");
return NO;
}
and then passed a onSelection prop from where I rendered my component. I gave console.logs in my node modules and got this object as props to the webview
{"cacheEnabled": true, "javaScriptEnabled": true, "onSelection": [Function onSelection], "originWhitelist": ["http://*", "https://*"], "source": {"uri": "https://www.google.com"}, "style": {"height": 500}, "useSharedProcessPool": true}
But I am not sure how to handle this function and call it from objective-c code. But still the context menu shows up when I select some text in the webview and the onSelection prop is not getting called.
I am sure I am missing some link here. Please help
For stop menuContext, you can add an eventListener for onselect event in order to use preventDefault in the code of you html in your WebView component, but onselect can only be used in input and textarea tags.
I was finally able to find a solution for this. I modified the code RNCWebView.m and RNCWebViewManager.m to block the onSelection event and by implementing the following code.
- (BOOL)canPerformAction:(SEL)action withSender:(id)sender {
return NO;
}
This disabled the default context menu inside web view. Then using injectJavascript prop of the webview I added an event listener to observe selectionChange event and respond to it with a custom function.
I'm currently creating an electron application (Frontend is in Vue) which can trigger native Drag-and-Drop-Operations. These Operations behave strange if i trigger them with HTML5 Drag Events (like dragstart, dragstop, etc.). So I have to implement my own Drag-and-Drop Handler using mouseup, mousedown and mousemove. So in simple theory:
If MouseDown is triggered -> Set Flag
If MouseUp is triggered -> Remove Flag
If MouseMove AND Flag -> checkCurrentPosition vs. initialPosition -> Do something
new Vue({
el: "#app",
data: {
mousedown: false
},
methods: {
onMouseDown: function(e){
console.log('mousedown');
this.mousedown = true;
},
onMouseUp: function(e){
console.log('mouseup');
this.mousedown = false;
},
onMouseMove: function(e){
if(this.mousedown) {
console.log('mousedown && mousemove');
console.log('clientX:', e.clientX);
console.log('clientY:', e.clientY);
}
},
}
})
Fiddle
if you check this example, open up your browsers console and play a little bit around with the image (click, drag and drop,...) you will see that if you drag the placeholder image, the mousedown event is triggered and the flag is set. Then I would expect that the mousemove event would be triggered frequently, but this is not happening.
Normally if you bind mousemove to some Div its triggered frequently if you hover with your mouse over it and you can get the actual position for example. But this is not happening after mousedown.
NOTE: The mouseup event in the Fiddle is not bound to Window, so if you Drop the Element outside of its area the mouseup event will not be triggered for the element. So the flag is not removed and then you can see the behaviour I would expect. the mousemove event is frequently triggered. So I think that the problem is that while the mouse is pressed the mousemove event is not triggered correctly.
Is there any way to get an event callback when the dojo-dijit's TitlePane expands?
I can capture onClick on the TitlePane. However, that is not enough for me. I have a button for "Expand All" TitlePanes. When user clicks on that I iterate on all TitlePanes and call it's toggle() method. When that happens, onClick event is not fired (as expected). I was wondering if there is any event fired upon toggle().
Or any other smart ways to address it also will be appreciated.
After looking into documentation in detail, I do not think there is any built in event that is fired during the toggle/expand. I ended up firing a custom event, and that helped me get what I wanted.
This answer helped me - https://stackoverflow.com/a/12852043/3810374
Basically,
First using isOpen() method, ensure the title pane is not already expanded. Then call toggle() method, and fire a custom event like this:
require(["dojo/on"], function(on){
// Send event
on.emit(target, "onExpand", {
bubbles: true,
cancelable: true
});
});
And then handle the event:
require(["dojo/on"], function(on){
// register event handler
on(target, "onExpand", function(e){
// handle event
});
});
You may be wondering, why not just do the work right after toggle(), instead of going through the pain of firing/handling event. I needed to handle the event in a particular closure, where I have access to other objects and variables.
In my mobile app, I have a FormPanel with a fieldset with textfields that could have been filled from some desktop application, by a skilled secretary with well beyond 300 keystrokes per minute.
So I want to provide the possibility to open a bigger field on doubletap onto the textfield, but I can't get the listener to work.
As of now, my code looks like this:
config:{
...
listeners : [{
fn:'onClearIconTap',
event:'clearicontap',
delegate:'textfield'
},{
fn:'onItemDblTap',//'onTextFieldDblTap',
event:'itemdoubletap',//'doubletap'
//delegate:'fieldset'//'textfield'
}]
The clearIconTap event is fired, but I can't get the doubletap to work.
How can I listen to that event?
That is expected behaviour, if you check Ext.field.Text documentation the doubletap event is not exposed by that component. That is a design choice for performance reason, they chose to listen to and expose only the events they considered relevant for each component.
That said, you can listen to events directly on the Ext.dom.Element associated to that component:
Try this:
{
fn:'onItemDblTap',
event:'doubletap',
element: 'element'
}