OU - 给 ExtJS 的输入控件增加提示功能

给 ExtJS 的输入控件增加提示功能

Wednesday, 9. September 2009, 05:37:11

在页面的 js 代码最上层，追加以下代码

Ext.override(Ext.form.Field, {
    afterRender: function() {
        this.initEvents();
        this.initValue();
        //取得控件的标签
        var findLabel = function(field) {
            var wrapDiv = null;
            var label = null
            wrapDiv = field.getEl().up('div.x-form-element');
            if(wrapDiv) {
                label = wrapDiv.child('label');        
                if(label) {
                    return label;
                }
            }
            wrapDiv = field.getEl().up('div.x-form-item');
            if(wrapDiv) {
                label = wrapDiv.child('label');        
            }
            return label;
        }
        //给控件追加 QuickTips
        if(this.qtip) {
            Ext.QuickTips.register({
                target: this.getEl(),
                title: '',
                text: this.qtip,
                enabled: true
            });
            var label = findLabel(this);
            if(label) {
                Ext.QuickTips.register({
                    target: label,
                    title: '',
                    text: this.qtip,
                    enabled: true
                });
            }
        }
        Ext.form.Field.superclass.afterRender.call(this);
    }
});

之后，在生成输入控件的代码中，若有以下属性
qtip: '提示消息'

当鼠标移动到控件上面，提示文字就会显示。

参考： http://www.yui-ext.com/forum/showthread.php?t=11537