-
Notifications
You must be signed in to change notification settings - Fork 1
/
lesson_59.html
131 lines (109 loc) · 3.47 KB
/
lesson_59.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>---</title>
<!-- extjs -->
<link rel="stylesheet" type="text/css" href="../ext-4.2.1.883/resources/css/ext-all-neptune.css">
<!--<script type="text/javascript" src="../extjs/ext-all.js"></script>-->
<script type="text/javascript" src="../ext-4.2.1.883/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="../ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<style type="text/css" >
body{padding: 20px 0 0 20px;}
h3{padding:none;margin:none;}
.add{ background-image: url(../ext-4.2.1.883/examples/menu/images/add.gif) !important;}
.add16{ background-image: url(../ext-4.2.1.883/examples/menu/images/add16.gif) !important;}
.block {
border: 1px red solid;
height:80px;
margin-top:50px;
padding:20px 0 0 20px;
clear:both;
}
.item {
border: 1px #000 solid;
margin-right:10px;
width: 200px;
height: 40px;
text-align:center;
padding-top:20px;
color:White;
cursor:pointer;
}
.my-body-class{backgroud-color:red;}
</style>
</head>
<body>
<script type="text/javascript">
var display_title = 'Ext.menu.Separator';
document.title = display_title + '-犸特头';
// 设置项目
Ext.application({
name: 'MyApp', // 项目名称
//appFolder : 'app' // 项目文件 。默认值为 app
launch: function() {
// begin
var colorPicker = Ext.create('Ext.menu.ColorPicker', {
value: '000000'
});
var dateMenu = Ext.create('Ext.menu.DatePicker', {
handler: function(dp, date){
Ext.Msg.alert('日期选择', '你选择日期是: ' + Ext.Date.format(date, 'Y年Mj日'));
}
});
colorPicker.on({
select: function(picker, selColor) {
var cs = Ext.getDom('color');
//background-color: #FF0000;
cs.style.background="pink";
cs.style.background='#'+selColor;
console.log(selColor);
},
scope: this // Important. Ensure "this" is correct during handler execution
});
Ext.create('Ext.menu.Menu', {
width: 150,
height: 210,
plain: true, // 去掉左边线条
floating: false, // 在没容器下显示,默认 true 不显示
renderTo: 'display',
items: [{
xtype: 'menucheckitem',
text: '显示多选'
},{
xtype: 'menuseparator'
},{
menu: colorPicker,
text: '颜色特效'
},{
text: '日期选择',
menu: dateMenu
},{
iconCls: 'add16',
text: '小图显示'
},{
text: '常用子项'
}]
});
// renderTo: 'display',
// renderTo: document.body,
// end
}
});
</script>
<div id="display">
</div>
<br/>
<div id="color" style="width:150px;height:150px;background:#CCFFCC;line-height: 150px;" align="center">
<h3>效果</h3>
</div>
<a id = "display_a" href="#" target="_blank"><h3 id="display_h3">-</h3></a>
<a href="http://blog.mttqq.com" target="_blank"><h3>犸特头-Extjs4更多学习</h3></a>
<h3>Q群:311176787</h3>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f50865b2598688abcae47cca8ae48b5c1ea26a45194c640071eefdd7212d3a2e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="extjs 技术交流" title="extjs 技术交流"></a>
<script type="text/javascript">
document.getElementById("display_h3").innerHTML = display_title;
document.getElementById("display_a").href = '../ext-4.2.1.883/docs/index.html#!/api/'+display_title;
</script>
</body>
</html>