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();    }});