Ext JS – 如果验证失败则禁用 FormPanel 提交答案

【问题标题】：Ext JS – Disabling FormPanel submit if validation failsExt JS – 如果验证失败则禁用 FormPanel 提交
【发布时间】：2025-12-18 09:05:01
【问题描述】：

我无法禁用表单验证失败的按钮。我想使用正则表达式：/^[0-9]+(,[0-9]+)*$/ 进行文本区域验证。我想禁用activatebutton。

我尝试了formBind 并监控验证仍然无法正常工作。

代码如下：

items: [{
    xtype: 'container',
    layout: {
        type: 'column'
    },
    items: [{
        columnWidth: .75,
        layout: "form",
        monitorValid: true,
        items: {
            fieldLabel: 'Please Enter  Activation Id',
            name: 'Activate',
            xtype: 'textarea',
            msgTarget: 'under',
            growMax: 200,
            allowBlank: false,
            blankText: "Please Enter Comma separated AssetIds",
            regex: /^[0-9]+(,[0-9]+)*$/,
            anchor: '100%'
        }
    }, {
        columnWidth: .25,
        items: {
            xtype: 'button',
            name: 'button',
            id: 'activatebutton',
            width: 100,
            text: 'Set for auto-activation',
            formBind: true,
            listeners: {
                click: function () {
                    shared.Notifier.success('The requ  ');
                    this.seForActivation();
                },
                scope: this
            }
        }
    }]
}]

【问题讨论】：

标签： regex validation extjs textarea disable

【解决方案1】：

为了使formBind 工作，您需要有一个Ext.form.Panel。表单面板将处理表单字段的检查，并在整个表单有效时调用formBind。

以下代码将处理formBind，另请参阅working Fiddle 和Ext.form.Panel documentation。

{
    xtype: 'form',
    layout: 'column',
    items: [{
        columnWidth: .75,
        layout: "form",
        monitorValid: true,

        items: {
            fieldLabel: 'Please Enter  Activation Id',
            name: 'Activate',
            xtype: 'textarea',
            msgTarget: 'under',
            growMax: 200,
            allowBlank: false,
            blankText: "Please Enter Comma separated AssetIds",
            regex: /^[0-9]+(,[0-9]+)*$/,
            anchor: '100%'

        }
    }, {
        columnWidth: .25,
        items: {
            xtype: 'button',
            name: 'button',

            id: 'activatebutton',
            width: 100,
            text: 'Set for auto-activation',
            formBind: true,
            listeners: {
                click: function () {

                    shared.Notifier.success('The requ  ');
                    this.seForActivation();
                },
                scope: this
            }
        }
    }]

【讨论】：