使用元素的颜色选择器
Ext.create("Ext.picker.Color",{
renderTo:Ext.getBody(),
listeners:{
select:function(picker,selColor){
// Ext.Msg.alert("提示","颜色: "+selColor)
// 设置背景色
Ext.getBody().dom.style.backgroundColor ="#"+selColor;
}
}
})；
第一种:
Extjs没有自带的颜色选择器，我在这自己实现了一个,使用方法与datafield完全一样
步骤如下：
1.实现一个Ext.form.field.Picker的子类
2.重写父类的createPicker方法，这个方法就是创建一个Ext.picker.Color对象。
3.写一个图标样式,及图片
.x-form-color-trigger {
background-image: url('../images/trigger-color.gif');
}
源码:
/*
* 该颜色选择器，颜色选择框一直显示在下拉框下面
* */
Ext.define('ColorField', {
extend:'Ext.form.field.Picker',
alias:'widget.colorfield',
requires:['Ext.picker.Color'],
triggerTip: '请选择一个颜色',
labelWidth: 60,
fieldLabel: '颜色',
value: '#FFFFFF',
createPicker:function () {
var me = this;
var config = {
pickerField:me,
renderTo:document.body,
floating:true,
hidden:true,
focusOnShow:true,
autoScroll:true,
minWidth: 195,
listeners:{
select:function (picker, selColor) {
me.setValue("#"+selColor);
// 实现根据选择的颜色来改变背景颜色,根据背景颜色改变字体颜色,防止看不到值
var r = parseInt(selColor.substring(0,2),16);
var g = parseInt(selColor.substring(2,4),16);
var b = parseInt(selColor.substring(4,6),16);
var a = new Ext.draw.Color(r,g,b);
var l = a.getHSL()[2];
if (l > 0.5 || selColor.toLowerCase() === 'ffff00') {
me.setFieldStyle('background:#' + selColor + ';color:#000000');
}
else{
me.setFieldStyle('background:#' + selColor + ';color:#FFFFFF');
}
}
}
};
//自定义颜色选择
if (Ext.isArray(me.colors)) {
config.colors = me.colors;
}
return Ext.create('Ext.picker.Color', config);
}
/*
// 使用该颜色组件，要监听boxready、change两个事件，在初始化时默认值时，不用触发select事件，就可以显示出背景色
boxready: function (obj) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = this.value;
},
change: function (obj, newValue, oldValue) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = newValue;
}
*
* */
});
调用代码：
Ext.create('ColorField', {
labelWidth: 107,
labelAlign: 'right',
240,
name: 'colorCombo',
fieldLabel: '颜色选择器',
allowBlank:false,
editable: false, //设置输入框不能编辑
listeners: {
boxready: function (obj) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = this.value;
},
change: function (obj, newValue, oldValue) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = newValue;
}
}
})
第二种：
/*
* 该颜色选择器，可以自定义颜色的选择，但缺点是显示后，界面滚动颜色选择器位置不会改变，
* */
Ext.define('ColorField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.colorfield',
triggerTip: '请选择一个颜色',
labelWidth: 60,
fieldLabel: '颜色',
value: '#FFFFFF',
SelctColorFun: null,
onTriggerClick: function () {
var me = this;
var config = {
pickerField: this,
ownerCt: this,
renderTo: Ext.getBody(),
floating: true,
focusOnShow: true,
// style: {
// backgroundColor: "#fff"
// },
value: me.value,
listeners: {
scope: this,
select: function (field, value, opts) {
me.setValue('#' + value);
me.inputEl.applyStyles({
backgroundColor: '#' + value
});
me.picker.hide();
if (typeof me.SelctColorFun === "function") {
me.SelctColorFun('#' + value);
}
}
}
};
if (Ext.isArray(me.colors)) {
config.colors = me.colors;
}
if (!me.picker) {
me.picker = Ext.create('Ext.picker.Color', config);
// me.picker.alignTo(me.inputEl, 'tl-bl?');
}
me.picker.show();
var attached = me.attached || false;
me.lastShow = new Date();
if (!attached) {
Ext.getDoc().on('mousedown', me.onMouseDown, me, {
buffer: Ext.isIE9m ? 10 : undefined
});
me.attached = true;
}
},
onMouseDown: function (e) {
var lastShow = this.lastShow,
doHide = true;
if (Ext.Date.getElapsed(lastShow) > 50 && !e.getTarget('#' + this.picker.id)) {
if (Ext.isIE9m && !Ext.getDoc().contains(e.target)) {
doHide = false;
}
if (doHide) {
this.picker.hide();
Ext.getDoc().un('mousedown', this.onMouseDown, this);
this.attached = false;
}
}
}
});
调用代码：
{
xtype: 'colorfield',
labelWidth: 100,
labelAlign: 'left',
240,
name: 'colorSelect',
fieldLabel: '颜色选择器',
value: '#00BAB4',
colors: ['00BAB4', '63B359', '2C9F67', '509FC9', '5885CF', '9062C0', 'D09A45', 'E4B138', 'EE903C'],
listeners: {
boxready: function (obj) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = this.value;
},
change: function (obj, newValue, oldValue) {
if (obj.inputEl)
obj.inputEl.el.dom.style.backgroundColor = newValue;
}
}
}