如何在Ext JS中获取提交事件的微粒字段的验证?

时间:2017-02-04 13:24:00

标签: extjs sencha-touch

以下是我的代码。 我得到两个fieldset,每个fieldset包含一些文本框和一个按钮。 我想仅验证属于该字段集的按钮单击上的那些字段。

例如,有两个选项:发送短信和发送电子邮件。每个选项都有一个发送按钮。如果我想发送短信或电子邮件,那么我不想验证所有字段。这意味着如果我想发送电子邮件,那么我想只验证电子邮件文本字段,而不是单击电子邮件发送按钮的SMS字段。

以下是我的代码。你可以更好地理解。

  this.form = new Ext.form.Panel({
            margin: '10 100 10 100',
            xtype: 'panel',
            border: true,
            layout: 'hbox',
            padding: '2 2 2 2',
            items: [{
                xtype: 'fieldset',
                flex: 1,
                layout: 'anchor',
                title: 'Send Email',
                //collapsible: true,
                //collapsed: true,
                border: false,
                defaults: { anchor: '100%' },

                items: [{
                    xtype: 'textfield',
                    name: 'txtRecipients',
                    allowBlank: false,
                    //fieldLabel: 'Last Name',
                    emptyText: 'Recipients email address',
                    padding: '2 2 2 2 '
                },
                {
                    xtype: 'textfield',
                    name: 'txtSubject',
                    allowBlank: false,
                    //fieldLabel: 'Last Name',
                    emptyText: 'Subject',
                    padding: '2 2 2 2 '
                },
                {
                    xtype: 'textareafield',
                    name: 'txtMessage',
                    allowBlank: false,
                    //fieldLabel: 'Last Name',
                    emptyText: 'Type your message here',
                    padding: '2 2 2 2 ',
                    rows: 4

                },
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'button',
                            margin: '0 0 0 0',
                            text: 'Send',
                            width: 80,
                            height: 30,
                            handler: function () {
                            }
                        }
                    ]
                }]

            },
            {
                xtype: 'fieldset',
                flex: 1,
                layout: 'anchor',
                title: 'Send SMS',
                //collapsible: true,
                //collapsed: true,
                border: false,
                defaults: { anchor: '100%' },

                items: [{
                    xtype: 'textfield',
                    name: 'txtRecipients',
                    allowBlank: false,
                    //fieldLabel: 'Last Name',
                    emptyText: 'Contact Numbers seperated by comma(,)',
                    padding: '2 2 2 2 '
                },
                {
                    xtype: 'textareafield',
                    name: 'txt1Message',
                    allowBlank: false,
                    //fieldLabel: 'Last Name',
                    emptyText: 'Type your message here',
                    padding: '2 2 2 2 ',
                    rows: 3

                },
                {
                    xtype: 'tbspacer',
                    height: 45
                },
                {
                    xtype: 'container',
                    items: [
                        {
                            xtype: 'button',
                            margin: '0 0 0 0',
                            text: 'Send',
                            width: 80,
                            height: 30,
                            handler: function () {
                            }
                        }
                    ]
                }]

            }]
        });

2 个答案:

答案 0 :(得分:2)

您只需将字段集xtype更改为form即可。这样你就可以直接验证并获得短信和电子邮件的价值。

答案 1 :(得分:1)

您需要为每个按钮添加特定功能。在每个角色中,您都需要对电子邮件或短信进行必要的验证。

示例:

 <%- @cows.each do |c| %>
<div class="row">
  <div class="col-md-12">
    <div id="Order">
      <%= f.simple_fields_for :iproductions do |ip| %>
      <%= render 'iproductions_fields', f: ip, cow: c %>
      <%end%>
      <div class="Order_links">
        <%= link_to_add_association c.name, f, :iproductions, cow: c, class: "btn btn-default" %>
      </div>
    </div>
  </div>
</div>