教你如何写Extjs插件

阅读更多

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

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

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

 

插件功能说明：

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

2，要求：提示信息可以自定义。

 

代码讲解：

Fieldtips代码：

FieldTips = Ext.extend(Object, {  
    init : function(f){  
        this.field = f;  
        if(f.msg){  
            this.tips = new Ext.ToolTip({  
                html : '
'+ f.msg +'
'  
            });  
        }  
        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);

 运行效果图：