extjs - 如何在 ExtJS 4 中创建自定义小部件？

Question

我想扩展颜色选择器小部件并为其添加一些当前缺少的新功能。目前 ExtJS 颜色选择器只允许我们从预定义的颜色中进行选择。我想添加一些功能，例如添加<canvas>将呈现色谱的元素，用户将能够选择自定义颜色、以 RGB 或十六进制格式提供颜色值的能力等。

我尝试Ext.Component直接从类扩展，但我没有得到 ExtJS 颜色选择器提供的默认功能。

那么谁能告诉我如何扩展 ExtJS 的当前小部件并添加新功能？

提前致谢 ！！！

Answer 1

最简单的方法是将其全部打包到一个扩展fieldcontainer以及 field 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;
    }
});