extjs - Binding a window button to form validation -
i'm trying use formbind: true on button enable/disable on modal window according validation state of form.
i want user have confirm accreditation number, , validation working reasonably. can't bind button state of validation. i've tried wiring event handlers on text fields manually handle this, no event handlers fire.
see fiddle running code: https://fiddle.sencha.com/#fiddle/1jrj
ext.define('myapp.view.util.dialogs.accreditation', { extend: 'ext.window.window', title: '', config: { name: '' }, modal: true, initcomponent:function() { var me = this; this.title = this.name + ' accreditation'; var accreditation1 = new ext.form.textfield( { fieldlabel: 'accreditation', growmin: 250, allowblank: false }); // doesn't fire // accreditation1.addlistener('activate', function(dis , eopt) {ext.msg.alert("woopy twang");}, this); var accreditation2 = new ext.form.textfield( { fieldlabel: 'confirm', growmin: 250, allowblank: false, validator: function(value){ if (accreditation1.getvalue() != value){ return 'accreditation numbers must match.' } return true; } }); var button1 = new ext.button.button({ xtype: 'button', text: 'ok', itemid: 'btnok', formbind: true }); var button2 = new ext.button.button({ xtype: 'button', text: 'cancel', itemid: 'btncancel', handler: function() { this.up('window').close(); } }); this.items = [ { html: '<h5>enter accreditation number ' + this.name + '</h5>' }, accreditation1, accreditation2 ] this.buttons = [ button1,button2 ] me.callparent(arguments); }, handlers: { activate : function(dis, opts) { ext.msg.alert('activate'); } } });
the problem don't have formpanel. from docs:
when inside formpanel, component configured
formbind: true
enabled/disabled depending on validity state of form.
your example not contain form panel. if put formpanel window, , put buttons form, not window, works:
this.layout='fit'; this.items = [{ xtype:'form', items:[ { html: '<h5>enter accreditation number ' + this.lendername + '</h5>' }, accreditation1, accreditation2 ], buttons: [ button1,button2 ] }]
Comments
Post a Comment