Extjs中的组件一般是继承自Ext.Component，如果想了解组件是如何实现的，具体可以参照Button的源代码，其是直接继承自Ext.Component的。
其中的关键属性 renderTpl 和 renderData，分别是设置模板和模板数据的属性，但是这样设置的话不灵活，不能像Button一样设置一个Text属性
就能自动设置模板中的数据，下面是参照Button实现的，在onRender回调函数中，动态的设置renderData，即将对象中的部分属性动态的添加到
renderData中。
监听Click事件的方法：
me.mon(me.el, ‘click, me.onClick, me);
所有的代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
Ext.onReady (
function
() {
Ext.define (
'MydesktopIcon'
, {
/* Begin Definitions */
alias:
'widget.desktopIcon'
,
extend:
'Ext.Component'
,
width: 76,
//height: 84,
overCls:
'x-view-over'
,
beforeRender: function () {
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)
}
}
});
});
|
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
