Extjs中的组件一般是继承自Ext.Component，如果想了解组件是如何实现的，具体可以参照Button的源代码，其是直接继承自Ext.Component的。

其中的关键属性 renderTpl 和 renderData，分别是设置模板和模板数据的属性，但是这样设置的话不灵活，不能像Button一样设置一个Text属性

就能自动设置模板中的数据，下面是参照Button实现的，在onRender回调函数中，动态的设置renderData，即将对象中的部分属性动态的添加到

renderData中。

监听Click事件的方法：

me.mon(me.el, ‘click, me.onClick, me);

所有的代码如下：

Ext.onReady (function () {

	
	Ext.define ('MydesktopIcon', {
			/* Begin Definitions */
			alias: 'widget.desktopIcon',
			extend: 'Ext.Component',
			
			width: 76,
			//height: 84,
			overCls: 'x-view-over',
			renderTpl:
				'<div class="ux-desktop-shortcut" id="{module}-shortcut">' +
				'<div class="ux-desktop-shortcut-icon">' + 
					'<img src="{iconName}" title="{name}">' +
				'</div>' +
				'<span class="ux-desktop-shortcut-text">{name}</span>' +
				'</div>' +
				'<div class="x-clear"></div>',
			
			// private
			onRender: function(ct, position) {
				// classNames for the button
				var me = this;
				// Apply the renderData to the template args
				Ext.applyIf(me.renderData, me.getTemplateArgs());
				 // Render internal structure
				me.callParent(arguments);
				//添加单击事件
				me.mon(me.el, 'click', me.onClick, me);
			},
			getTemplateArgs: function () {
				var me = this;
				return {
				   name: me.name || ' ',
				   module: me.module || ' ',
				   iconName: me.iconName || Ext.BLANK_IMAGE_URL,
				}
			},
			onClick: function(e) {
			        var me = this;
			        me.ownerCt.fireEvent ('itemClick', this);
    			},

			// inherit docs
    			initComponent: function() {
        			var me = this;
        			me.callParent(arguments);
				
			},
		});


	Ext.create ('Ext.panel.Panel', {
			title:'test',
			frame: true,
			height:800,
			renderTo: Ext.getBody(),
			items: [{
						xtype: 'desktopIcon',
						name:'首页',
						module:'firstPage',
						iconName: '../SDOJ/images/problems.png'
					},{
						xtype: 'desktopIcon',
						name:'个人信息',
						module:'firstPage',
						iconName: '../SDOJ/images/myself.png'
				},{
						xtype: 'desktopIcon',
						name:'首页',
						module:'firstPage',
						iconName: '../SDOJ/images/firstpage.png'
					},{
						xtype: 'desktopIcon',
						name:'首页',
						module:'firstPage',
						iconName: '../SDOJ/images/contest.png'
				},
				{
						xtype: 'desktopIcon',
						name:'首页',
						module:'firstPage',
						iconName: '../SDOJ/images/college.png'
					},{
						xtype: 'desktopIcon',
						name:'首页',
						module:'firstPage',
						iconName: '../SDOJ/images/letter.png'
				}],
			listeners: {
				itemClick: function (item) {
					alert (item.name)
				}
			}
				
		});


});