首页 > 解决方案 > Ext JS – 如果验证失败则禁用 FormPanel 提交

问题描述

我无法禁用表单验证失败的按钮。我想使用 regex:/^[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
            }
        }
    }]
}]

标签: regexvalidationextjstextareadisable

解决方案


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

以下代码将处理formBind,另请参阅工作 FiddleExt.form.Panel 文档

{
    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
            }
        }
    }]

推荐阅读