欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

教你如何写Extjs插件

程序员文章站 2022-03-05 20:25:22
...

本文转载自:http://czpae86.iteye.com/blog/691683,作者:czpae86

在项目开发中,难免会用到Extjs写插件来实现需求,有一些功能写插件就可以搞定的,无需重新封装一个类。

下面用一个以前写的插件来讲解。

 

插件功能说明:

1,实现功能:鼠标放在文本框上面时提示信息,鼠标离开后提示信息消失。

2,要求:提示信息可以自定义。

 

代码讲解:

教你如何写Extjs插件
            
    
    博客分类: Extjs ExtjsHtmlFPF# Fieldtips代码

FieldTips = Ext.extend(Object, {  
    init : function(f){  
        this.field = f;  
        if(f.msg){  
            this.tips = new Ext.ToolTip({  
                html : '<div style="margins:0px 0px 0px 2px">'+ f.msg +'</div>'  
            });  
        }  
        f.on('afterrender',this.initTips, this);  
    },  
    initTips : function(){  
        this.field.el.on('mouseover', this.showTips, this);  
        this.field.el.on('mouseout', this.hideTips, this);  
    },  
    showTips : function(e, t, o){  
        if(this.tips)this.tips.showAt(e.getXY());  
    },  
    hideTips : function(e, t, o){  
        if(this.tips)this.tips.hide();  
    }  
});  

 使用fieldtips插件代码

var fp = new Ext.FormPanel({  
        labelWidth: 75,   
    labelAlign:'right',  
        frame:true,  
        title: '测试',  
        bodyStyle:'padding:5px 5px 0',  
        width: 350,  
        defaults: {width: 230},  
        defaultType: 'textfield',  
    items: [{  
        fieldLabel: '标题',  
        name: 'title',  
        plugins : new FieldTips(),  
        msg : "来匆匆去冲冲!"  
    },{  
        fieldLabel: '内容',  
        xtype : "textarea",  
        name: 'content',  
        plugins : new FieldTips(),  
        msg : "请您写下宝贵的建议,吾万分感谢!"  
    }]  
}).render(document.body);

 运行效果图:

教你如何写Extjs插件
            
    
    博客分类: Extjs ExtjsHtmlFPF# 

教你如何写Extjs插件
            
    
    博客分类: Extjs ExtjsHtmlFPF#