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
Related
I having html form with angular-js and there is need to remove focus on required fields which are failed on submission.
Actually I am showing all error messages in Pop-Up box. So there is no need to focus on failed controls.
Please help me for it.
This depends on way you are starting you validation.
Assume you are doing this by clicking on some btn.
If so, you should create directive which will subscribe to the click event
and do focus to the document or other element you choose for this.
Don't forget to unsubscribe your listner from the element on $destroy event with .off()
If you are using another way for starting validation you should subscribe to it and do the same.
Hope this was helpful.
Previously I was using type="submit" for input #time of submitting form and Now by using type="button", resolved this issue.
I have a form (done in AngularJS) for entering records into a movie database. Within the form I have a dropdown of actors which the user can select from to add to the movie record that they are in the middle of creating. When the user clicks the button next to the dropdown to add the actor to the movie, it submits the entire form. I could, of course, take the easy way and use a div instead a but I feel that I shouldn't have to work around this like that. Is there a standard of way of dealing with this?
In these situations, as buttons in default are type="submit", Just set type="button" on all buttons that you do not want them to submit the form.
That would do the trick for you.
You can handle the click using ng-click.
In the Dom:
<button ng-click="handleClick()">I love Polka Dot Bow Ties.</button>
In the Controller:
$scope.handleClick= function handleClickFn($event) {
$event.stopPropagation();
}
Stopping the propagation of the event, prevents the event from bubbling up to its parent elements and triggering your submit.
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);
}
},
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).
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