日期:2014-05-16  浏览次数:20695 次

ext onblur校验
初学extjs,遇到个问题
登录页面,vtype为qtip,输入账号,失去焦点时,立即触发后台的action校验此账号是否存在,不存在时将返回的json中的msg属性的值,放到qtip的提示中。
注意:不是alert出msg,这个很容易。请教ext如何实现?

------解决方案--------------------
不需要用vtype
写个onblur事件请求后台就可以了
------解决方案--------------------
探讨

多谢1L 这个我知道 问题是怎么把返回的东西放到qtip中?

------解决方案--------------------
Msg.suggest('提示',返回msg信息);

JScript code


Ext.ux.suggest = function(){
    var msgCt;
    function createBox(t, s){
        return ['<div class="msg">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><font color=red><h2>', t, '</h2></font>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        show : function(title, format, pau){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
  
            if(!pau) pau = 3;
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html: createBox(title, s)}, true);
            m.slideIn('t').pause(pau).ghost("t", {remove: true});
        },
        mask: function(id, title){
            var el = Ext.get(id);
            return {
                show: function(s){
                    el.mask(s || title, 'x-mask-loading');
                }, 
                hide: function(){
                    el.unmask();
                },
                destroy: function(){}
            };
        }
    };
}();


/**
 * 重写、扩展Ext.MessageBox某些方法
 * @author davi
 */
Ext.apply(Ext.MessageBox, {
        msgBox: function(ico, title, msg, fn, scope){
            this.show({
                title : title,
                msg : '<br>' + msg,
                buttons: this.OK,
                fn: fn,
                scope : scope,
                icon: ico
            });
             return this;
        },
        //信息
        info : function(msg, fn, scope){
            return this.msgBox(this.INFO, '信息', msg, fn, scope);
        },
        //问题
        quest : function(msg, fn, scope){
            return this.msgBox(this.QUESTION, '问题', msg, fn, scope);
        },
        //警告
        warn : function(msg, fn, scope){
            return this.msgBox(this.WARNING, '警告', msg, fn, scope);
        },
        //错误
        error : function(msg, fn, scope){
            return this.msgBox(this.ERROR, '错误', msg, fn, scope);
        },
        //提示
        cfm : function(msg, fn, scope){
            var msg = '<br>' + msg;
            return this.confirm('提示', msg, fn, scope);
        },    
        mask: function(el, title){
            return Ext.ux.suggest.mask(el, title);
        },
        //右上角提示
        suggest: Ext.ux.suggest.show,
        //自定义提示
        throwOut: function(type,title,msg, format, pau){
            if(type=='suggest') this.suggest(title,msg, format, pau)
            else if (type=='alert') return this.alert(title,msg,format,pau);
        }
});
var Msg = Ext.MessageBox;

------解决方案--------------------
CSS code
new Ext.ToolTip({
        target: 'passwordId',//显示在password的地方
        html: 'Click the X to close me',
        title: 'My Tip Title',
        autoHide: false,
        autoShow: true,
        closable: true,
        dr