extjs - 如何检查少数表单字段是否为空？

Question

我正在使用 ExtJS 3.4.0

我在 Ext.Window() 的“var new”变量中有一个表单。

我需要做检查文本字段和文本区域之间的代码是否为空。

我的意思是如果 textfield 为空而 textarea 不是，则可以提交表单数据，反之亦然。

必须将此代码放置在以下开头的代码中：

newform
.getForm()
.submit(

Answer 1

我希望你能在我的例子中找到

Ext.onReady(function(){


var newForm=Ext.create('Ext.form.Panel',{

            title:"Form",
            items:[
                  {
                   xtype:"textfield",
                   fieldLabel:"Name"
                  },
                  {
                        xtype     : 'textareafield',
                        name      : 'message',
                        fieldLabel: 'Message'

                    }

                  ],
            renderTo:document.body
  });

              var win= new Ext.Window
                    ({
                     title:"Window",
                     layout:'fit',
                     height:250,
                     width:300,
                     items:[newForm],
                     buttons:[
                              { 
                               text:"Submit",
                               handler:function(){
                                 var textFieldValue=newForm.items.items[0].getValue();
                                 var textAreaValue=newForm.items.items[1].getValue();
                                 if(textFieldValue!=""||textAreaValue!=""){
                                   alert("you can submit the data");
                                   }
                                   else{
                                   alert("you can't submit the data");
                                   }
                                }
                              }
                             ]
                   }).show();

});

Answer 2

以下示例显示了一个带有文本字段和文本区域的表单。两者都是强制性的。

allowBlank : : 指定 false 以验证值的长度必须大于 0。如果为 true，则无论可能应用的任何 vtype 验证如何，都始终将空白值视为有效。

validate () : Boolean 通过验​​证字段的当前值返回字段值当前是否有效，如果字段的有效性自上次验证后发生更改，则触发validitychange 事件。注意：禁用的字段始终被视为有效。

请参阅以下示例：http ://docs.sencha.com/extjs/6.2.0/classic/Ext.form.Panel.html#ext-form-panel_example-usage

Ext.create('Ext.form.Panel', {
    title: 'Simple Form',
    bodyPadding: 5,
    width: 350,

    // The form will submit an AJAX request to this URL when submitted
    url: 'save-form.php',

    // Fields will be arranged vertically, stretched to full width
    layout: 'anchor',
    defaults: {
        anchor: '100%'
    },

    // The fields
    defaultType: 'textfield',
    items: [{
        fieldLabel: 'First Name',
        name: 'first',
        allowBlank: false,
        validator: function(val) {
            return (val.trim().length > 0) ? true : "This field may not be empty";
        }
    }, {
        xtype: 'textarea',
        fieldLabel: 'Last Name',
        name: 'last',
        allowBlank: false,
        validator: function(val) {
            return (val.trim().length > 0) ? true : "This field may not be empty";
        }
    }],

    // Reset and Submit buttons
    buttons: [{
        text: 'Reset',
        handler: function() {
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Submit',
        formBind: true, //only enabled once the form is valid
        disabled: true,
        handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
                form.submit({
                    success: function(form, action) {
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {
                        Ext.Msg.alert('Failed', action.result.msg);
                    }
                });
            }
        }
    }],
    renderTo: Ext.getBody()
});