如何在ExtJS4中创建自定义小部件？

我想扩展“颜色选择器”小部件，并向其添加一些当前缺少的新功能。目前，ExtJS颜色选择器只允许我们从预定义的颜色中进行选择。我想添加一些功能，比如添加

元素，它将呈现颜色光谱，用户将能够选择自定义颜色，能够以RGB或十六进制格式提供颜色值，等等

我试图直接从

Ext.Component

类扩展，但是没有得到ExtJS颜色选择器提供的默认功能

那么，有人能告诉我如何扩展ExtJS的当前小部件并添加新功能吗

---

提前感谢

最简单的方法是将其打包到一个类中，该类随字段mixin一起扩展。下面是一个示例（简单地一起键入，完全未经测试！）。我认为，只要只使用本机组件和本机布局，就不需要重写渲染

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;
    }
});

---

您是否尝试扩展“Ext.picker.Color”？我尝试扩展“Ext.picker.Color”，但不确定如何将文本框置于默认颜色之下，以便用户能够输入RGB和十六进制值。您需要覆盖渲染方法：谢谢您的回答。我还有一个问题。在我的自定义颜色选择器中，我必须添加一些html元素，例如，我将在其中渲染颜色光谱，以便用户能够选择自定义颜色。那么，是否可以使用上述代码添加此类自定义html元素？@Shekhar在这种情况下，您需要编写自己的组件。我怀疑现有的色彩采集器是否能帮到你。我的错误是我没有完全阅读你的帖子，对此我深表歉意。无论如何，我上面的例子可能是一个很好的起点。只是选择者将拥有你自己的一个…@Shekhar也许这个选择者可以帮助你写你自己的一个