ExtJs4_RegistrationForm示例浅析;

/**
 * RegistrationForm示例浅析
 */
Ext.require([
    'Ext.form.*',
    'Ext.Img',
    'Ext.tip.QuickTipManager'
]);
Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();        // 初始化提示工具框；
    
    // 自定义客户端验证表单：
    var formPanel = Ext.widget('form', {
        renderTo: Ext.getBody(),        // document.body也可以，或者某个DIV elementid;
        
        frame: true,
        width: 450,
        height: 250,
        
        bodyPadding: 10,
        bodyBorder: true,
        title: "用户帐户注册",
        
        defaults: {
            anchor: '100%'    
        },
        fieldDefaults: {
            labelAlign: 'right',
            msgTarget: 'none',
            invalidCls: '' // 取消单个显示无效信息效果；下边将会集中显示；
        },
        
        listeners: {
            fieldvaliditychange: function() {
                this.updateErrorState();
            },
            
            fielderrorchange: function() {
                this.updateErrorState();
            }
        },
        
        updateErrorState: function() {
            var me = this,
                errorCmp,
                fields,
                errors;
                
            if(me.hasBeenDirty || me.getForm().isDirty()) {    // 避免当表单form第一次加载的时候显示全部无效信息；
                errorCmp = me.down("#formErrorState");
                fields = me.getForm().getFields();
                errors = [];    // 存储无效信息；
                
                fields.each(function(field) {
                    Ext.Array.forEach(field.getErrors(), function(error) {
                        errors.push({name: field.getFieldLabel(), error: error});
                    });
                });
                
                errorCmp.setErrors(errors);        // 调用自定义setErrors()方法；
                me.hasBeenDirty = true;
            }
        },
        
        items: [{
            fieldLabel: "帐号名称",
            name: "username",
            xtype: "textfield",
            allowBlank: false,
            minLength: 6
        }, {
            fieldLabel: "邮箱地址",
            name: "email",
            xtype: "textfield",
            vtype: "email",
            allowBlank: false
        }, {
            fieldLabel: "账户密码",
            name: "password1",
            xtype: "textfield",
            inputType: "password",
            style: "margin-top: 15px",    // 使之与"邮箱地址"输入框拉开15px距离；
            allowBlank: false,
            minLength: 6
        }, {
            fieldLabel: "密码确认",
            name: "password2",
            xtype: "textfield",
            inputType: "password",
            allowBlank: false,
            validator: function(value) {    // 验证两次输入的密码是否相同；
                var password1 = this.previousSibling('[name=password1]');
                return (value===password1.getValue())?true:'两次输入的密码不相同！';
            }
        }, {
            fieldLabel: "使用协议",
            hideLabel: true,    // 此label只是用于无效信息的名称；
            name: "acceptTerms",
            xtype: "checkboxfield",    // 或为 checkbox;
            boxLabel: "我已经阅读并同意此<a href='http://www.sencha.com/legal/terms-of-use/' class='terms'>协议</a>。",
            style: 'margin-top: 15px; margin-left: 105px;',
            
            listeners: {    // 监听点击<协议>链接；
                click: {
                    element: 'boxLabelEl',
                    fn: function(e) {
                        var target = e.getTarget('.terms'),    // 点击协议两字；
                            win;    // 显示保护静态网页的窗体；
                            
                        if(target) {
                            win = Ext.widget('window', {
                                title: "ExtJs项目使用协议",
                                
                                modal: true,    // 遮盖效果；
                                html: "<iframe src='"+ target.href +"' width='950' height='500' style='border:0'></iframe>",
                                buttons: [{
                                    text: "不接受",
                                    handler: function() {
                                        this.up('window').hide();
                                        formPanel.down('[name=acceptTerms]').setValue(false);    // 不勾选协议checkbox;
                                    }
                                }, {
                                    text: "接受",
                                    handler: function() {
                                        this.up('window').hide();
                                        formPanel.down('[name=acceptTerms]').setValue(true);    // 勾选；
                                    }
                                }]
                            });
                            
                            win.show();        // 打开窗体；
                            e.preventDefault();    // 取消默认动作_浏览器打开超级链接的默认动作；
                        }
                    }
                }
            },
            
            getErrors: function() {    // 注意：返回的是数组类型；
                return this.getValue()?[]:['请先选择接受此协议！']
            }
        }],
        
        // 停靠区域：
        dockedItems: [{
            xtype: "container",    // 容器；
            dock: "bottom",        // 停靠位置；
            layout: {
                type: "hbox",    // 水平布局；
                align: "middle"    // 子组件在垂直方向居中；
            },
            padding: "10 10 5 10",
            
            items: [{
                xtype: "component",
                id: "formErrorState",    // 可使用me.down("#formErrorState")获取;
                flex: 1,
                baseCls: 'form-error-state',
                
                validText: "<span style='color: green;'>数据有效，可以提交！</span>",
                invalidText: "<span style='color: red;'>数据无效，不可提交！</span>",
                
                // 自定义模板：用户格式化提示框内容；
                tipTpl: Ext.create('Ext.XTemplate', '<ul><li>无效信息：</li><tpl for="."><li>' +
                            '<span class="field-name">{name}</span>：<span class="error">{error}</span>' +
                        '</li></tpl></ul>'),
                getTip: function() {    // 自定义方法：得到提示框；
                    var tip = this.tip;
                    if(!tip) {
                        tip = this.tip = Ext.widget('tooltip', {
                            target: this.el,
                            
                            autoHide: false,
                            anchor: "top",    //箭头在提示框头部；
                            constrainPosition: false,
                            mouseOffset: [-11, -2],        // 提示框显示的地方，至于值的确定，得对着结果慢慢调；
                            
                            closable: true,
                            cls: 'errors-tip'
                        });
                        //tip.show();    // 不自动显示，只有鼠标移到到此容器上边才显示；
                    }
                    return tip;
                },
                
                setErrors: function(errors) {    // 自定义方法；
                    var me = this,
                        baseCls = me.baseCls,
                        tip = me.getTip();    // 拿到提示框；
                        
                    errors = Ext.Array.from(errors);    // 确保errors为数组；
                    
                    // 更新CSS类和tooltip内容；
                    if(errors.length) {
                        me.addCls(baseCls + '-invalid');
                        me.removeCls(baseCls + '-valid');
                        me.update(me.invalidText);    // 使用component组件的update()方法进行更新；
                        
                        tip.setDisabled(false); // 启用；
                        tip.update(me.tipTpl.apply(errors));    // 用模板来更新tooltip内容；
                    } else {
                        me.addCls(baseCls + '-valid');
                        me.removeCls(baseCls + '-invalid');
                        me.update(me.validText);
                        
                        tip.setDisabled(true);
                        tip.hide();
                    }
                }
            }, {
                xtype: "button",
                text: "注册",
                formBind: true,        // 按钮跟表单进行绑定，只有当表单有效时，才显示按钮；
                disabled: true,    // 默认禁用；
                
                width: 60,
                handler: function() {
                    var bform = this.up('form').getForm();
                    
                    if(bform.isValid()) {
                        Ext.Msg.alert("注册信息", bform.getValues(true)/*转换成字符串*/);
                    }
                }
            }]
        }]
    });
});