zoukankan      html  css  js  c++  java
  • 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',
    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;
    }
    }
    }

     

  • 相关阅读:
    [LeetCode]2. Add Two Numbers链表相加
    Integration between Dynamics 365 and Dynamics 365 Finance and Operation
    向视图列添加自定义图标和提示信息 -- PowerApps / Dynamics365
    Update the Power Apps portals solution
    Migrate portal configuration
    Use variable to setup related components visible
    Loyalty management on Retail of Dynamic 365
    Modern Fluent UI controls in Power Apps
    Change screen size and orientation of a canvas app in Power App
    Communication Plan for Power Platform
  • 原文地址:https://www.cnblogs.com/wind-wang/p/9100215.html
Copyright © 2011-2022 走看看