forked from ryanpetrello/ext-ux
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
68 lines (66 loc) · 3.21 KB
/
index.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
<html>
<head>
<title>Ext.ux.ColorPicker</title>
<link href="vendor/resources/ext-theme-crisp/ext-theme-crisp-all.css" rel="stylesheet" type="text/css"/>
<script src="vendor/ext-all.js" type="text/javascript"></script>
<script src="src/ColorPicker.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.application({
name: 'Color Picker Example',
launch: function () {
var viewport = new Ext.Viewport({
layout: 'anchor',
items: [
{
xtype: 'panel',
anchor: '100% 100%',
layout: 'fit',
title: 'Color Picker Examples',
tools: [
{
xtype: 'label',
style: {marginLeft: 10},
html: "<a href='https://github.com/hijeane/color-picker'>Fork me on github.com</a>"
}
],
items: [
{
border: false,
padding: 10,
defaults: {labelWidth: 200},
bodyStyle: { background: 'transparent'},
items: [
{
xtype: 'color-picker',
fieldLabel: 'Choose background color',
listeners: {
select: function (self, color) {
self.up('container').setStyle('background', color);
}
}
},
{
xtype: 'color-picker',
fieldLabel: 'Choose label color',
listeners: {
select: function (self, color) {
Ext.query('.x-form-item-label', false).map(function (i) {
i.setStyle('color', color);
})
}
}
}
]
}
]
}
]
});
}
})
});
</script>
</head>
<body></body>
</html>