ExtJS：Simple Form忽略formBind [英] ExtJS: Simple Form ignores formBind

问题描述

我有一个小问题让我疯狂了几天。我有一个表单面板：

  Ext.define（'EC.view.PasswordPanel'，{
 extends：' Ext.form.Panel'，
别名：'widget.pwdpanel'，
 
 bodyPadding：15，
 
 initComponent：function（）{
 this .initialConfig = {url：'/ password /'}; 
 
 this.fieldDefaults = {
 labelAlign：'right'，
 labelWidth：135，
 msgTarget： 'side'，
 allowBlank：false，
 inputType：'password'
}; 
 
 //this.listeners = {
 ////规则破坏formBind 
 // validchange：function（comp，valid）{
 //this.down('button').setDisabled(!valid）; 
 //}}; 
 
 this.buttons = [{
 text：'Change'，
 formBind：true，
 scope：this，
 handler：function（）{
 this.subm它（{
 success：function（form，action）{
 Ext.Msg.alert（
'Success'，
'< p>密码更改已成功安排。 < / p>'+ 
 EC.DELAY_NOTICE）; 
 form.reset（）; 
}，
失败：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：'旧密码'
}，{
 xtype：'textfield'，
 name：'pw_new1'，
 id：'pw_new1'，
 fieldLabel：'新密码'，
 minLength：8，
 maxLength：16 
}，{
 xtype：'textfield'，
 name：'pw_new2'，
 fieldLabel：'确认新密码'，
}]; 
 
 this.callParent（arguments）; 
} 
}）; 
  

我在TabPanel内实例化了一个标签：

$ b $




项目：{xtype：'pwdpanel'}，
}，

现在，验证工作完全正常，但是在窗体无效时，更改按钮不会被禁用。要清楚：当我按下它时，它不会提交，但我觉得应该被禁用？

我在做某件事情错误？第二个选项卡中的另一个表单面板工作得很好。

我可以使用我注释掉的监听器来规避问题，但是我明白它应该可以正常工作。 / p>

PS随意指出任何愚蠢/不好的风格，我是ExtJS的新手。

解决方案

这是extjs的明显错误，因为即使他们自己的示例也是一样的

然而，我发现了快速的解决方法 - 添加到 initComponent 行：

  this.on（'afterrender'，function（me）{
 delete me.form._boundItems; 
}）; 
  

这里是小提琴。

更新

错误在4.0.7中修复。

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.

解决方案

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.

这篇关于ExtJS：Simple Form忽略formBind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！