Question

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

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

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

提前致谢!!!

Answer 1

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

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

1 个答案: