绑定窗口按钮以进行表单验证

Question

我试图在按钮上使用 formBind: true 来根据表单的验证状态在模式窗口上启用/禁用它。

我希望用户必须确认认证编号，并且验证工作正常。但是我无法将按钮绑定到验证状态。我尝试在文本字段上连接一些事件处理程序来手动处理此问题，但没有事件处理程序触发。

请参阅此小提琴以获取运行代码： 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 your Accreditation Number for ' + this.name + '</h5>'
            },
            accreditation1,
            accreditation2
        ]

           this.buttons = [
                  button1,button2
        ]



        me.callParent(arguments);
    },
    handlers: {
        activate : function(dis, opts) {
            Ext.Msg.alert('activate');
            }
    }


});

Answer 1

问题是你没有模板。来自文档：

在 FormPanel 内部时，配置的任何组件都formBind: true将根据表单的有效性状态启用/禁用。

您的示例不包含表单面板。如果将表单面板放入窗口中，并将按钮放入表单中，而不是放入窗口中，则它会起作用：

    this.layout='fit';
    this.items = [{
        xtype:'form',
        items:[
            {
                html: '<h5>Enter your Accreditation Number for ' + this.lenderName + '</h5>'
            },
            accreditation1,
            accreditation2
        ],
        buttons: [
            button1,button2
        ]
    }]