Which event fires after form load? My requirement is at the time of view load based on some condation some controls set to disable mode(read only)
so how to handle this (which event)
i have try this formpanel.on({ actioncomplete: function (form, action) {} but ist not fired
thanks in advance
I just struggled with this today. The important thing to keep in mind is that there is no event fired on form.loadRecord() as it is simply a setValues() wrapper. If you want an event to be fired on loadRecord(), you will need to define it yourself by extending Ext.form.Basic (and potentially adding the event to relayEvents in Ext.form.Panel).
I assume you a event after a record/data has loaded into the form. The action get handled in the basicForm and calls. Within the basicForm the load() calls doAction() so you should be able to use the following events from the basicForm
actioncomplete : ( Form this, Action
action ) Fires when an action is
completed.
actionfailed : ( Form this, Action
action ) Fires when an action fails.
beforeaction : ( Form this, Action
action ) Fires before any action is
performed. Return false to cancel the
action.
You can observe the events on an Observable using Ext.util.Observable.capture. Here is an example of observing a form, which is loaded and then submitted:
http://jsfiddle.net/el_chief/HBah5/4/
I saw these events:
fieldvaliditychange
fielderrorchange
validitychange
dirtychange
beforeaction (i hit submit)
afterlayout
actionfailed (it did not submit to anywhere)
Don't forget, BasicForm has its own events (though I believe they are all relayed to Form), as do Fields inside a form.
Changing basic.trackResetOnLoad changes some of the events too, in particular "dirtychange"
Related
I have one quick action which opens up the aura lightning component. In that I have one requirement to execute some logic when the quick action is closed by "X" close button on the top right corner(not by cancel button).
I was searching so many articles most of them explained about closing the quick action by clicking the cancel button. I would like to know whether we can write some logic when quick action is closed by "X" close button or is there any way we can capture the onClick event for this close button.
I couldn't share any code snippets because I have not written any, still I am searching for solutions.
Have you seen the aura component lifecycle, especially stuff around (re)rendering the component? You could attach what you need to "unrender" call.
Put this in myComponent/myComponentRenderer.js and try?
({
unrender: function () {
this.superUnrender();
alert('You\'re closing me, I thought we were friends');
}
})
Alternatively have a look at handling aura:valueDestroy. I mean renderer should just try to clean some custom DOM stuff, free memory maybe, shouldn't run business logic. If there's a more appropriate system event - maybe play with that one?
Have you tried creating a custom event to handle this?
Reference: Lightning Aura Components Developer Guide: Create Custom Component Events
Create a custom component event using the <aura:event> tag in a .evt resource. Events can contain attributes that can be set before the event is fired and read when the event is handled.
Use type="COMPONENT" in the <aura:event> tag for a component event. For example, this c:compEvent component event has one attribute with a name of message.
1. <!--c:compEvent-->
2. <aura:event type="COMPONENT">
3. <!-- Add aura:attribute tags to define event shape.
4. One sample attribute here. -->
5. <aura:attribute name="message" type="String"/>
6. </aura:event>
7.
The component that fires an event can set the event’s data. To set the attribute values, call event.setParam() or event.setParams(). A parameter name set in the event must match the name attribute of an <aura:attribute> in the event. For example, if you fire c:compEvent, you could use:
1.
2. event.setParam("message", "event message here");
3.
The component that handles an event can retrieve the event data. To retrieve the attribute value in this event, call event.getParam("message") in the handler’s client-side controller.
I'm using a realtime listener on a firestore collection to get the latest data. The function I'm using is like below,the function is attached to a button press.
function getItems(selectedCategory){
const subscriber = firestore()
.collection('CollectionName')
.doc('documentName')
.collection('CollectionName2')
.where("category", "==", selectedCategory)
.onSnapshot(documentSnapshot => {
console.log('Total Docs: ', documentSnapshot.size)
documentSnapshot.forEach(documentSnapshot => {
console.log('doc ID: ', documentSnapshot.id);
});
});
unSubscriptions.push(subscriber); //to detach the listener when page is changed(usefocuseffect)
}
when I call the function I can get the results and render them accordingly. But if I invoke the function again with a different input variable for "selectedCategory" it also logs the results. The thing is if any changes happened with the first occurrence (the first input variable) it also gets logged. I believe this happens because the listener for the first input parameter is still being active. Is there a way I can detach the first listener before invoking a second one.
P.S : I'm using a return function with useFocusEffect to cleanup the listeners when the page goes out of focus(which works) but I want to do a similar thing with a button press.
onSnapshot() returns a function that you need to call to detach your listener.
So you need to simply do subscriber() (note the parentheses) when clicking your button.
The specific doc is here.
I am writing a wrapper for material-ui/AutoComplete.
I want it to:
set value and submit on clicking the suggestions,
set value and submit on pressing enter on the suggestions,
navigate through list by pressing arrow keys
submit on clicking a submit button next to the AutoComplete button.
I realise that I need to capture three events:
onKeyDownCapture
onKeyDown
onNewRequest
All the events are handled using the same handler.
Among these events, onNewRequest is triggered as usual but onKeyDown is triggered when I press the enter button while onKeyDownCapture captures a click.
When the value updates, the component also triggers onNewRequest automatically, leading to duplicate and expensive calls to my search service.
Is there a way to block duplicate calls for search service?
Here is the code for my component:
handler(){
// calls search service.
}
render(){
return (
<AutoComplete
...{props}
onKeyDownCapture={this.handler}
onKeyDown={this.handler}
onNewRequest={this.handler}
/>
}
I tried an ugly "newRequestDuplicatesHandler" which basically keeps track of the last search request text and prevents the duplicate requests by comparing the new search request text. However this is not a clean solution.
The original code, as shown above causes duplicate requests.
However, the newRequestDuplicatesHandler does the trick. But this is not a clean solution.
With react-color https://casesandberg.github.io/react-color/ .
I can use ready-made onChangeComplete function from react-color.
But I wonder how can I create that onChangeComplete by using input type color tag.
I tried onBlur but the color won't change until user clicks or presses tab
On the other hand, using onChange keep firing updates.
Because currently I'm using redux state, so dispatching update continuously when I drag and choose color isn't a good way.
Any ideas how to create onChangeComplete?
It depends on how you'd like to define a change. To prevent continuous updates every time the mouse moves, you'll probably want to update Redux state only when the mouse stops moving. (This seems to be the behaviour on the page you linked to).
You could use the following JavaScript to detect when the mouse stops moving:
let timer;
window.addEventListener('mousemove', function (e) {
console.log('Mouse moving');
clearTimeout(timer);
timer = setTimeout(() => console.log('Mouse stopped'), 300);
});
Then, try putting the above code inside your ComponentDidMount() method and replace console.log('Mouse stopped') with whatever Redux action you want to dispatch!
300 is the number of milliseconds without movement that will trigger the action, which could be changed depending on how sensitive you want your app to feel.
Lastly, remember to remove the event listener in your ComponentWillUnmount() method.
https://github.com/casesandberg/react-color/blob/7ee60d845e5d5e11e4f6ecb895b2d9755c59d09d/src/components/common/ColorWrap.js#L30
Here is the code that how react-color implemented onChangeComplete.
It is hard coded using debounce.
I put the link there for anyone interested in using that solution
I am trying to reset my collection without triggering the 'reset' event. I have set up my collection to listen to both 'reset' and 'add' events
#.listenTo(#options.muses, 'add', #addOne)
#.listenTo(#options.muses, 'reset', #addAll)
When I click on a button, the first thing I want to do is to clear out the collection
optionButtonClicked: (e) ->
e.preventDefault()
target = #$(e.currentTarget)
//step to clear out the collection
#options.muses.reset({silent:true})
However when I did some logging and checking, I realize that the 'reset' event was still being triggered i.e. the #addAll function was still being called.
Am I missing something here? Isn't silent:true supposed to suppress the reset event?
reset takes two optional parameters, models 1st, options 2nd. From the docs: resetcollection.reset([models], [options]).
so you need to pass in the silent option as the second parameter.
#options.muses.reset(undefined, {silent:true});