集成Ext.js和jscolor

Question

I am unable to integrate this Javascript color picker into my app. I use the following code:

jscolor installation:

<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">

http://jscolor.com/

Ext. js part:

xtype: 'component',
    cls: 'jscolor',
    componentCls: 'jscolor',
    html: {
        html: '<input  type= "text" class="jscolor" />'
    },
    itemId: 'colorPicker',
    listeners: {
        afterrender: {
            fn: me.onComponentAfterRender,
            scope: me
        }
    }
},

When the form is rendered the input type is not rendered as a color picker. What am I missing here.

Answer 1

I don't know exactly where the error came from, but if you want to render only the input (with no field label), I suggest to us autoEl config:

xtype: 'component',
cls: 'jscolor',
autoEl: {
    tag: "input",
    type: "text"
},
itemId: 'colorPicker'
listeners: {
    afterrender: {
        fn: me.onComponentAfterRender,
            scope: me
        }
    }
}

If you want to still have a proper ExtJS field with value, fieldLabel, etc... capabilities, you will have to extend a Ext.form.field.Base and see how to add the cls to the inputEl (shouldn't be very complicated, you might do this on a afterRender method or change the inputAttrTpl ).

EDIT: And it seems you need to call jscolor.init() after the rendering of you component !!! EDIT2: using ExtJs 4.2, xtype is not recognize so you need to create your component with Ext.create('widget.component, {...})

Hope it helps

Working Fiddle: https://fiddle.sencha.com/#fiddle/15q9