ExtJS: Simple form ignores formBind

Question

I have a tiny problem that drives me crazy for a few days. I have a form panel:

Ext.define('EC.view.PasswordPanel', { extend: 'Ext.form.Panel', alias: 'widget.pwdpanel', bodyPadding: 15, initComponent: function() { this.initialConfig = {url:'/password/'}; this.fieldDefaults = { labelAlign: 'right', labelWidth: 135, msgTarget: 'side', allowBlank: false, inputType: 'password' }; //this.listeners = { //// circumvent broken formBind //validitychange: function(comp, valid) { //this.down('button').setDisabled(!valid); //}}; this.buttons = [{ text: 'Change', formBind: true, scope: this, handler: function() { this.submit({ success: function(form, action) { Ext.Msg.alert( 'Success', '<p>Password change has been scheduled successfully.</p>' + EC.DELAY_NOTICE); form.reset(); }, failure: function(form, action) { if ('result' in action && 'msg' in action.result) { Ext.Msg.alert('Error', action.result.msg); } } }); } }]; this.items = [ { xtype: 'textfield', name: 'pw_old', fieldLabel: 'Old password' }, { xtype: 'textfield', name: 'pw_new1', id: 'pw_new1', fieldLabel: 'New password', minLength: 8, maxLength: 16 }, { xtype: 'textfield', name: 'pw_new2', fieldLabel: 'Confirm new password', } ]; this.callParent(arguments); } }); 

which I create on a tab from TabPanel:

 { title: 'Change Password', items: { xtype: 'pwdpanel' }, }, 

Now the check works fine, but the "Change" button is not disabled while the form is invalid. To be clear: when I click it, it does not go, but I feel that it should be turned off?

Am I doing something obvious wrong? Another form panel on the second tab works fine.

I can get around the problem using the listener that I commented on, but I understand that it should work without it.

PS Feel free to point out any nonsense / bad style, I am completely unfamiliar with ExtJS.

Answer 1

It clears the extjs error because even their own examples work the same.

However, I found a quick workaround - add the initComponent lines:

 this.on('afterrender', function(me) { delete me.form._boundItems; }); 

Here is the fiddle .

UPDATE

Bug fixed 4.0.7.

Answer 2

I am sure this is an extjs bug, as you can find in Ext.form.Basic.getBoundItems. This function initially initiates boundItems as an empty array ([]), because its request started before the fields were displayed. So here is the fix for this error.

 //Fix formBind Ext.form.Basic.override({ getBoundItems: function() { var boundItems = this._boundItems; //here is the fix if(this.owner.rendered) { if (!boundItems) { boundItems = this._boundItems = Ext.create('Ext.util.MixedCollection'); boundItems.addAll(this.owner.query('[formBind]')); } } return boundItems; } }); 

This fix is ​​applied worldwide, so you don’t always need to add an 'afterrender' handler for every form you create. Here is an example using http://jsfiddle.net/gajahlemu/SY6WC/