How to create custom widget in ExtJS 4?

Question

I want to extend color picker widget and add some new features to it which are currently missing in it. Currently ExtJS color picker allows us to select from predefined colors only. I want to add features like adding <canvas> element which will render color spectrum and user will be able to select custom color, ability to provide color value in RGB or hex format, etc.

I tried to extend from Ext.Component class directly but then I dont get the default functionality provided by ExtJS color picker.

So can anyone please tell me how to extend current widgets of ExtJS and add new functionality?

Thanks in Advance !!!

Answer 1

The easiest way would be to pack it all into a class that extend fieldcontainer along with the field mixin. Here is a example (simply typed together, totally untested!). I think you don't need to rewrite the rendering as long as you use just native components with native layouts.

Ext.define('Ext.ux.form.field.AdvancedPicker', {
    extend: 'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.advancedpicker',
    layout: 'hbox',
    width: 200,
    height: 22,
    combineErrors: true,
    msgTarget: 'side',

    pickerCfg: null,
    textfieldCfg: null,

    initComponent: function () {
        var me = this;
        if (!me.pickerCfg) me.pickerCfg = {};
        if (!me.textfieldCfg) me.textfieldCfg = {};
        me.buildField();
        me.callParent();
        me.pickerField = me.down('picker')
        me.textField = me.down('textfield')

        me.initField();
    },

    //@private
    buildField: function () {
        var me = this;
        me.items = [
        Ext.apply({
            xtype: 'picker',
            submitValue: false, // this one shouldn't get submitted
            width: 100,
            flex: 2
        }, me.pickerCfg),
        Ext.apply({
            xtype: 'textfield',
            submitValue: false, // this one shouldn't get submitted
            width: 80,
            flex: 1
        }, me.textfieldCfg)]
    },

    getValue: function () {
        var me = this,
            value;
        // getting the value form the nested fields
        return value;
    },

    setValue: function (value) {
        var me = this;
        // setting the values to the nested fields
    },

    getSubmitData: function () {
        var me = this,
            data = null;
        // getting the value form the nested field which should get submit in formatted manner (if needed. otherwise just call getValue())
        return data;
    }
});