ColorMap.js
3.1 KB
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
Ext.define('amdaUI.ColorMap', {
extend: 'Ext.form.ComboBox',
alias: 'widget.colormap',
data : [],
onValueChange: null,
constructor:function(config){
this.getData();
this.init(config);
this.callParent();
},
getData:function(){
var me = this;
amdaDefaultConfigs.availableColorMaps.forEach(function(color){
me.data.push({key:color.key,name:color.value, iconUrl:'generic_data/colormaps/'+ color.svgFile})
});
},
init: function(config){
var me = this;
var size = (typeof config !== "undefined" && config.size) ? config.size : '12';
var hideFieldLabel = true;
if (typeof config !== "undefined") {
hideFieldLabel = (config.hideFieldLabel !== false);
}
Ext.apply(this,{
xtype:'combobox',
name: (typeof config !== "undefined" && config.name) ? config.name:null,
fieldLabel: hideFieldLabel ? '' : 'Color Map <img amda_clicktip="colourMaps" style="vertical-align:bottom" src="js/resources/images/16x16/info_mini.png"',
store: new Ext.data.Store({
fields: ['key','name', 'iconUrl'],
data: me.data
}),
displayField: 'name',
valueField: 'key',
tpl: '<tpl for="."><div class="x-boundlist-item"><span data-qtip="{name}"> \
<img src="{iconUrl}" class="svg-icon" style="height:'+size+'px;"> \
</span>\
</div></tpl>',
editable: false,
queryMode: 'local',
onValueChange: (typeof config !== "undefined" && config.onValueChange) ? config.onValueChange : null,
listeners: {
change: function (combo, newValue, oldValue, eOpts) {
var iconUrl="";
var colorName = "";
me.data.forEach(function(colorData){
if(colorData.key == newValue ){
iconUrl= colorData.iconUrl;
colorName = colorData.name;
}
});
combo.inputEl.setStyle('background-image', 'url(' + iconUrl + ')');
combo.inputEl.setStyle('background-size', '100%');
combo.inputEl.setStyle('background-repeat', 'no-repeat');
combo.inputEl.setStyle('background-position', 'center');
combo.inputEl.setStyle('font-size', '0');
combo.inputEl.set({ "data-qtip": Ext.String.htmlDecode(colorName) });
if (me.onValueChange)
me.onValueChange(me.name, newValue, oldValue);
},
click: {
element: 'el',
fn: function(e,t) {
var me = t,
text = me.getAttribute('amda_clicktip');
if (text) {
e.preventDefault();
AmdaAction.getInfo({name : text}, function(res,e) {
if (res.success) myDesktopApp.infoMsg(res.result);
});
}
}
},
scope:this
},
})
}
});