I have a form with a save, clear and reload button. The clear button works by clearing the form, using the reset method. But on clicking, the reload button, the form should be loaded back with the data that was typed in the form before clicking the clear button. So, how could this be done? Thanks in advance.
Check out loadRecord() method:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-loadRecord
Take a look at the form's getValues() and setValues() methods. When the clear button is clicked, you can use var oldValues = form.getValues() to store the current field values. Then when the reload button is clicked, you can restore the values via form.setValues(oldValues).
Related
I have a redux form with a submit button and a normal html button. I dont want the form to be validated when the normal button is pressed. But looks like the form is always validated once and then when I click the button again the onclick on the button is executed. How do I prevent this?
I replicated the same issue with same form. For example if you go to http://redux-form.com/6.4.3/examples/syncValidation/ ,enter 4 in the age field and click on clear values. First time the validation triggers and stops the button action. Second time the button action works i.e, the form values are cleared..
The example you link to has that behavior because by default Redux Form will call the validation function for touched Fields on a blur event. The fact that you are clicking a button is irrelevant - you could click on any element or anywhere on the page and you would get that behavior.
The only real way to stop this behavior is to stop Redux Form from touching your Fields on a blur event. You can do this by setting touchOnBlur to false in the Redux Form config object.
export default reduxForm({ form: 'myForm', touchOnBlur: false })(MyForm);
Please Add type="button" to prevent the button from submitting the form.If you don't give any type it will consider submit.
I've added a simple form with one input and a save button. The save function is called and works as expected.
But I now want to add a boolean to disabled logic on the save button. So in my current page I have a state called email which I want to disable the button if this is empty.
What I did try is the following, passing {!this.state.email} into the disabled property of the button but it doesn't disable the save button. Similar to this example:
<Button primary={true} disabled={!this.state.email} onClick={this._onSave}>Save</Button>
I also logged the value in the _onBlur method and I can see that email state is being populated.
Question:
How can you bind component state to button disabled property?
This is a gist of my current component:
http://hastebin.com/jufahijoza.js
Look at my comments for an explanation.
_onBlur(event) {
//if(true or false)
// this.refs.myInputButton theres your button now disable/enable it with javascript
this.props.setUserEmail(event.target.value);
console.log(this.state.email);
}
I am new to Extjs4.1. I need to edit the grid data cell and edited value saved while pressing save button in grid toolbar. Its working nice. But changes are not reflected immediately.
When I press save button, the updated cell having old value. I need to click search button to see updated values.
I called store.load(); inside the saveFunction() and I can able to store edited values in DB. But the Grid is not displaying the updated values immediately in IE9.
Please someone help me to solve this issue.
Thanks in advance.
I have finally got the ans. I just loaded the store in ajax success
success: function(response, options) { store.load(); }.
Thanks all.
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0
I have created a form in ExtJS.
I am validating the text fields on the form e.g. if the fileds are empty or there are some ajax requests that are sent to the server and returs some results.
The Submit button is initially disabled, and what I want is to enable the button once the validations are done(if all validations are ok).
how can I achieve this???
Can anyone help in this.
Thanks in advance!!!
In your TabPanel you could listen to one (or both) of the forms' 'clientvalidation' event and then enable/disable your submit button based on the outcome of each form's isValid method. Something like...
this.get(0).on('clientvalidation', function(){
var button = this.getTopToolbar().get(0); //get a reference to your button
button.setDisabled(!(this.get(0).isValid() && this.get(1).isValid()));
}, this);
Hope this helps
Stuart