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。 From the docs：

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

您的示例不包含表单面板。如果您将一个formpanel放入窗口，并将按钮放入窗体，而不是放入窗口，它可以工作：

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

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

1 个答案: