Extjs4 自定义组件

  1     Ext.onReady (function () {
  2  
  3      
  4     Ext.define ('MydesktopIcon', {
  5             /* Begin Definitions */
  6             alias: 'widget.desktopIcon',
  7             extend: 'Ext.Component',
  8              
  9              76,
 10             //height: 84,
 11             overCls: 'x-view-over',
 12             renderTpl:
 13                 '<div class="ux-desktop-shortcut" id="{module}-shortcut">' +
 14                 '<div class="ux-desktop-shortcut-icon">' + 
 15                     '<img src="{iconName}" title="{name}">' +'sssssssssss'+'{name}'+
 16                 '</div>' +
 17                 '<span class="ux-desktop-shortcut-text">{name}</span>' +
 18                 '</div>' +
 19                 '<div class="x-clear"></div>',
 20              
 21             // private
 22             onRender: function(ct, position) {
 23                 // classNames for the button
 24                 var me = this;
 25                  // Render internal structure
 26                 me.callParent(arguments);
 27                 //添加单击事件
 28                 alert('dddddd');
 29                 alert(me.name);
 30                 me.mon(me.el, 'click', me.onClick, me);
 31             },
 32             getTemplateArgs: function () {
 33                 var me = this;
 34                 return {
 35                    name: me.name || ' ',
 36                    module: me.module || ' ',
 37                    iconName: me.iconName || Ext.BLANK_IMAGE_URL,
 38                 }
 39             },
 40             onClick: function(e) {
 41                     var me = this;
 42                     me.ownerCt.fireEvent ('itemClick', this);
 43                 },
 44  
 45             // inherit docs
 46                 initComponent: function() {
 47                     alert('dd');
 48                     var me = this;
 49                     Ext.applyIf(me.renderData, me.getTemplateArgs());
 50                    // me.callParent(arguments);
 51                  
 52             },
 53         });
 54  
 55  
 56     Ext.create ('Ext.panel.Panel', {
 57             title:'test',
 58             frame: true,
 59             height:800,
 60             renderTo: Ext.getBody(),
 61             items: [{
 62                         xtype: 'desktopIcon',
 63                         name:'首页',
 64                         module:'firstPage',
 65                         iconName: '../SDOJ/images/problems.png'
 66                     },{
 67                         xtype: 'desktopIcon',
 68                         name:'个人信息',
 69                         module:'firstPage',
 70                         iconName: '../SDOJ/images/myself.png'
 71                 },{
 72                         xtype: 'desktopIcon',
 73                         name:'首页',
 74                         module:'firstPage',
 75                         iconName: '../SDOJ/images/firstpage.png'
 76                     },{
 77                         xtype: 'desktopIcon',
 78                         name:'首页',
 79                         module:'firstPage',
 80                         iconName: '../SDOJ/images/contest.png'
 81                 },
 82                 {
 83                         xtype: 'desktopIcon',
 84                         name:'首页',
 85                         module:'firstPage',
 86                         iconName: '../SDOJ/images/college.png'
 87                     },{
 88                         xtype: 'desktopIcon',
 89                         name:'首页',
 90                         module:'firstPage',
 91                         iconName: '../SDOJ/images/letter.png'
 92                 }],
 93             listeners: {
 94                 itemClick: function (item) {
 95                     alert (item.name)
 96                 }
 97             }
 98                  
 99         });
100  
101  
102 });
相关阅读:
面向对象之绑定方法与非绑定方法
 Django-admin源码解析
 单例模式
 Django-admin管理工具
 Django-CBV
叠加装饰器，三元表达，生成，调用，递归
 迭代器与生成器
 有参装饰器
 储备知识与装饰器
 文件修改
原文地址：https://www.cnblogs.com/huzi007/p/3605722.html