Extjs4 自定义颜色选择器ColorField

使用元素的颜色选择器

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',
    width: 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',
    width: 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;
        }
    }
}