• Ext.ux.form.Validation 验证插件的使用


    Ext.define('Ext.ux.form.Validation', {
        extend: 'Ext.AbstractPlugin'
        , alias: 'plugin.uxvalidation'

        , init: function (view) { //view代表传入进来的Ext.form. field.Field
            Ext.override(view, {
                getErrors: function (value) {
                    var me = this, errors = me.callParent(arguments);
                    console.log(me);
                    if (!me.disabled && me.remoteValidator) {
                        var params = {};
                        for (var i in me.remoteValidator.params) {
                            params[i] = me.up('form').down(me.remoteValidator.params[i]).getValue() || 'empty'; //down(包括up)

    实际上是调用了Ext.ComponentQuery的query方法,其参数可以为itemId ,不过要加#作为前缀
                

            }
                        Ext.Ajax.request({
                            url: me.remoteValidator.url,
                            params: params,
                            method: 'GET',
                            scope: this,
                            callback: function (options, success, response) {
                                if (success) {
                                    var ret = Ext.JSON.decode(response.responseText).data;
                                    if (!ret.Success) {
                                        me.setActiveErrors([ret.ErrorMsg]);
                                    }
                                }
                            }
                        });
                    }
                    return errors;
                }
            })
        }
    });

    1.以前写插件以为传入进来的容器同过this.cmp来寻找,而对于验证插件直接可以调用init(view),会将form空间当参数传进来。

    2.这里调用Ext.override的方法重写了控件的getErrors()方法,但是会继续调用父级方法me.callParent(arguments);

    3.通过down 查找到对应的控件,然后获取其值

    4.调用  Ext.Ajax.request实现后台数据验证

    5.这里的me指代的是form 的控件,而不是自己拓展的插件,弄清这个很关键。

  • 相关阅读:
    js 兼容各类手机 的写法 待续
    css 兼容 各类手机的写法 待续
    数组的解构赋值
    let 和 const 命令
    ECMAScript 6 简介
    webpack4新建一个项目
    Webpack 4 Tutorial: from 0 Conf to Production Mode
    webpack4.1.1的使用详细教程
    git merge git pull时候遇到冲突解决办法git stash
    Git 常用命令速查表(图文+表格)
  • 原文地址:https://www.cnblogs.com/shen119/p/3311821.html
Copyright © 2020-2023  润新知