I have a Grid panel containing records which, on-click, will be loaded into a Form panel for editing.
On "close" of our form panel, we're calling myForm.getForm.reset(), which seems to reset the record but the values in the form fields themselves persist.
// Load record
me.down('form').loadRecord(record);
// Close
me.down('form').getForm().reset() or me.down('form').reset()
Please advise how to also clear values in the form upon resetting our record.
Do you have trackResetOnLoad set to true for the form? If so, what you really want is it set to false.
Maybe you need set 'resetRecord' parameter into 'reset()' method for unbind any record set by 'loadRecord' method.
Example:
me.down('form').getForm().reset(true)
You can override the default form panel to add this functionality. Add the following to your code:
Ext.override(Ext.form.Panel, {
clearForm:function(){
Ext.each(this.getForm().getFields().items, function(field){
field.setValue('');
});
}
});
You can then clear a form using:
myForm.clearForm()
Where myForm is your form panel.
The reset() method just resets the form back to the last record loaded.
If you want to maintain trackResetOnLoad=true (e.g. so you can use the form's "dirtychange" event) another approach is to take a copy of the values just after the form is created like var originalValues = myForm.getFieldValues(); then simply restore those values using myForm.setValues(originalValues); instead of calling myForm.reset(...);
You can try this...
this.up('form').getForm().reset();
Related
I have this scenario where a field is invalid due to another selection on the form. When that selection changes I want to revalidate. I tried calling $setViewValue on the field when the selection changes, but that doesn't refire the validation. Any ideas?
I have a hack working, but I would prefer a clean solution.
I ran into the same issue and found a workaround/feature that appears to be undocumented. If you need to trigger ngModelController to revalidate, you can either do:
ngModelCtrl.$setViewValue(value, 'your event name', true);
or if you don't need to update your model value
ngModelCtrl.$commitViewValue(true);
The true in both cases above is a flag for revalidation. Without this flag, the issue I was running into was that if the model value does not change, then angular simply skips the validation. I am using this way to manually mark a custom control as $dirty
Source:
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1843
Write a directive, say validation, and place it on your field in the definition of this directive in the:
link:function(scope,element,args){
element.bind('onfocus',function(){
// Your logic
})
// Similarly, bind other relevant events like key presses, etc.
}
Put a ng-change on your select and broadcast an event in it:
$rootScope.$broadcast("selectChangedEvent");
Then, in a directive you have placed on your field, simply put in the link function:
$rootScope.$on("selectChangedEvent", () => ngModelCtrl.$validate());
$validate runs each of the registered validators of your field.
How to change the state dirty of a form to false?
Is there something like setDirty(false) method of Ext.Form.Panel?
UPD:
My task is to track Form dirty state for enabling docked SAVE button to become enabled only if there are any changes in the form.
I'm tracking dirtychange event with:
init: function() {
this.control({
'form': {
dirtychange: function(form) {
alert('change');
}
}
});
}
But when I'm loading a record through loadRecord() method into the Form I'm geting chage alert while loading record and Form becomes dirty after Record was loaded.
I'd like to reset dirty state of a Form right after Record loading and start tracking dirtychange event on record filled form.
Any ideas?
Correction
There is a property available which changes the original-value when a value get set.
trackResetOnLoad: true
See this JSFiddle
Old answer below might be quit inconvenient but I let it unchanged
First I have to say you will not find any such method
And that's because the form has not such a state, the fields have it. All what the form does is iterating over each field and check if it is dirty. If any field is dirty it will be checked if this value (the dirty mark) has changed since the last check and if so the dirtychange event is fired. Then this get saved as last check (wasDirty)
Now let's look at the fields cause they really trigger it:
They are checking onChange and onReset if the field is dirty by checking !me.isEqual(me.getValue(), me.originalValue) where originalValue is the value that was set the time initValue was called.
Now what's to do to 'set' the Form no longer 'dirty'
Iterate over all fields of the form by using getFields() on Ext.form.Basic now we will set the current value as original value (reset will now reset to this value) by calling initValue on each field and that's it.
wrong code removed
Edit
Well I've modified my last code from above to
var items = form.getForm().getFields().items,
i = 0,
len = items.length;
for(; i < len; i++) {
var c = items[i];
if(c.mixins && c.mixins.field && typeof c.mixins.field['initValue'] == 'function') {
c.mixins.field.initValue.apply(c);
c.wasDirty = false;
}
}
and forked a working example. The Button will stay inactive till any changes are detected and will again set inactive if you remove the changes. Play around with it I guess this is what you'Re looking for.
There is the method reset(). If used without an argument it retains the form data loaded with loadRecord().
So if you call reset() after loading the data, your form should not be dirty any more.
myForm.loadRecord(record);
myForm.reset();
I think, the dirtychange event will also be called by loading the data, but after the reset() you can check the form with isDirty().
A workaround here is to use a hidden field and set it's value to force the form dirty. We use this in widgets which do not contain form fields. To set the form dirty, we simply change the value of the hidden-field, to set it clean, we reset it to the original value.
I want to disable whole Row, all its text content, actioncolumns, editors etc.
not really possible. I mean it's not in the framework. You can mark a record (=row) as disabled. You could add the functions setDisabled/getDisabled to the model of the store. Then you can call something like:
grid.getStore().getAt(0).setDisabled(true) for the first record
function for the model:
function setDisabled( state ){
var me = this;
me.disabled = state;
me.fireEvent('disabled', state);
}
function getDisabled(){
return this.disabled;
}
now you can listen for that event, get the disabled/enabled state. If it's disabled you could add a class to that row (addRowCls( ) - removeRowCls( )) for the visuals. You can listen for the edit event. Then you can prevent editing when the record is disabled.
Not really an out of the box solution but use a little imagination and you'll get there! Hope it helps ;)
I'm using extJS 4.
I have a form pop up every time you click edit profile.
The problem is that every time you click edit Profile another form pops up so you can just keep clicking.
Is there a way to make the form only pop up if there isn't one already up.
Thanks for the help!!!
The problem sounds like you are creating a new window on every click of the "edit profile" button/link.
What you need to do is put a check in at the beginning of your form code to check to see if it exists first. If it doesn't, create the window and .show() it... Otherwise, you will just need to .show() it. Be sure to also reset the form if need be. You will also want to try and hide the window instead of destroying it. Otherwise, you will be creating new objects every time.
You can make your form modal, so to block entire interface until you close it, or you can use something like this to your controller to create form:
editProfile: function(button) {
var me = this;
if (!me.win) {
me.win = Ext.widget('editProfile');
// delete the me.win reference if the window gets destroyed
me.win.on('destroy', function() {
delete me.win;
return;
});
}
me.win.show();
}
if in an extjs grid filter, I set the autorelaod to false and I want to reload the store when the user clicks outside the filter, how do I go about it? I am looking at:
filter.onblur(
check to see if filter value has changed
if yes,
fire :'updateFilter'
)
Is this correct?
The second question is: If I wish to load the store via a custom loader method...I cannot afford to call 'updatefilter'. But I am at a loss to figure out what are the events I need to fire in sequence so that my custom method will be called.(instead of the default store.load)
Thank you
I think the event is 'update'.
Explained in docs 'Ext.data.Store-event-update'