教你如何写Extjs插件

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

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

 

插件功能说明：

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

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

 

代码讲解：

 

 

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();
	}
});

 

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);

 

 

运行效果图：