Ext.js5表单—验证vtype扩展（时间段以及密码确认）(50)

view

/**
 * Advanced validation examples using VTypes
 * 对于Vtypes验证例子的扩展
 */
Ext.define('KitchenSink.view.form.AdvancedVTypes', {
    extend: 'Ext.container.Container',
    xtype: 'form-advtypes',
    controller: 'form-advtypes',

    //貌似之前写margin:x x x x没有放在对象中，
    //对于margin-bottom单个的可能需要用style对象引入
    defaults: {
        style: {
            'margin-bottom': '20px'
        }
    },

    width: 500,

    items: [{
        xtype: 'box', // same as 'component'貌似插入html文本的时候xtype都写的是component,不知道为什么20151222
        html: [
            '<p>The first example shows two date fields acting as a date range. ',
            'Selecting an initial date sets the minimum value for the end field. ',
            'Selecting an ending date sets a maximum value for the start field.</p>'
            //第一个例子展示的是时间段
        ]
    }, {
        xtype: 'form',
        title: 'Date Range',
        frame: true,
        bodyPadding: '5 5 0',

        style: {
            'margin-bottom': '40px'
        },

        fieldDefaults: {
            msgTarget: 'side',
            autoFitErrors: false
        },

        layout: 'form',

        defaultType: 'datefield',

        items: [{
            fieldLabel: 'Start Date',
            name: 'startdt',
            itemId: 'startdt',
            vtype: 'daterange',
            endDateField: 'enddt' // id of the end date field引入结束时间的id
        }, {
            fieldLabel: 'End Date',
            name: 'enddt',
            itemId: 'enddt',
            vtype: 'daterange',
            startDateField: 'startdt' // id of the start date field引入开始时间的id
        }]
    }, {
        xtype: 'box',
        html: [
            '<p>This second example shows a password verification, the second value must be equivalent',
            'to the first to validate.</p>'
            //第二个例子展示密码验证，其中第二次输入的密码必须和第一次输入的密码一样
        ]
    }, {
        xtype: 'form',
        frame: true,
        title: 'Password Verification',
        bodyPadding: '5 5 0',

        layout: 'form',

        fieldDefaults: {
            msgTarget: 'side',
            autoFitErrors: false
        },

        defaults: {
            inputType: 'password'
        },
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'Password',
            name: 'pass',
            itemId: 'pass',
            allowBlank: false,
            listeners: {
                validitychange: 'validateField',
                blur: 'validateField'
            }
        }, {
            fieldLabel: 'Confirm Password',
            name: 'pass-cfrm',
            vtype: 'password',
            initialPassField: 'pass' // id of the initial password field
        }]
    }]
});

viewcontroller

Ext.define('KitchenSink.view.form.AdvancedVTypesController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.form-advtypes',

    validateField: function(field) {
    //这个next还不太清楚是继承哪一个类，用的什么样的方法。
    //粗略估计可能是Ext.draw.modifier.Modifier类下面的next的方法
    //解释：Next modifier that receives the pop-up changes.
        field.next().validate();
    }
});