将 window 按钮绑定到表单验证

Question

我正在尝试根据表单的验证状态在按钮上使用 formBind: true enable/disable 它在模态 window 上。

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

有关运行代码，请参阅此 fiddle： 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

问题是您没有模板。 From the docs:

When inside FormPanel, any component configured with formBind: true will be enabled/disabled depending on the validity state of the form.

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

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

将 window 按钮绑定到表单验证

Binding a window button to form validation

extjs

extjs5