ExtJS: Simple Form ignores formBind

问题:

I have a tiny problem that is driving me crazy for 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 instantiate a tab from within a TabPanel:

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

Now, the validation works perfectly fine, but the "Change" button isn't disabled while the form isn't valid. To be clear: When I press it, it doesn't submit, yet I feel it should be disabled?

Am I doing something obvious wrong? Another form panel in a second tab works just fine.

I can circumvent the problem using the listener I commented out, but I understand that it should work w/o.

P.S. Feel free to point out any stupidities/bad style, I'm totally new to ExtJS.

回答1:

It's clear bug of extjs because even their own example works the same.

However, I've found quick workaround - add to initComponent lines:

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

Here is fiddle.

UPDATE

The bug is fixed in 4.0.7.

回答2:

Sure this is an extjs bug as you can found at Ext.form.Basic.getBoundItems . This function originally initiate boundItems as empty array ([]) because its start querying before the fields is rendered. So here is the fix for this bug.

//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 apply globally so you don't need to always add 'afterrender' handler on every form that you create. Here is the sample of use http://jsfiddle.net/gajahlemu/SY6WC/

文章来源: ExtJS: Simple Form ignores formBind