extjs选择器中的渲染器配置类似于什么？

我正在使用Extjs-6开发一个web应用程序。我想从

Ext.form.field.Picker

扩展一个类。我的做法如下：

...
extend: 'Ext.form.field.Picker',
createPicker: function(){
   return new Ext.panel.Panel({
      items: [{
         xtype: 'textfield',
         name: 'text',
         fielLabel: 'text label'
      }, {
         xtype: 'colorfield',
         name: 'color',
         fielLabel: 'color field'
      }, 
      ...
      ]
   });
}
...

{
   text: 'value of textfield',
   color: 'value of colorfield'
}

我在此类中的值是一个对象，如下所示：

...
extend: 'Ext.form.field.Picker',
createPicker: function(){
   return new Ext.panel.Panel({
      items: [{
         xtype: 'textfield',
         name: 'text',
         fielLabel: 'text label'
      }, {
         xtype: 'colorfield',
         name: 'color',
         fielLabel: 'color field'
      }, 
      ...
      ]
   });
}
...

{
   text: 'value of textfield',
   color: 'value of colorfield'
}

但当我将这个对象设置为类的值时，它在picker中显示为

[object object]

我怎样才能知道呢

---

让选取器有一个类似于

渲染器的confis来获取选取器的值，然后返回正确的字符串？
不仅仅是模板。
下面是textfield+datefield的示例选择器实现，只需将其调整为具有colorfield即可

// component has picker with both textfield and datefield;
// when picker is collapsed, data is displayed as "{text}, {date}"
Ext.define('ColorPicker', {
    extend: 'Ext.form.field.Picker',

    // picker template
    config: {
        popup: {
            lazy: true,
            $value: {
                xtype: 'window',
                closeAction: 'hide',
                referenceHolder: true,
                minWidth: 540,
                minHeight: 60,
                layout: 'form',
                header: false,
                resizable: true,
                items: [
                    {
                        xtype: 'textfield',
                        name: 'text',
                        fielLabel: 'text label',
                        anchor: '100%',
                        reference: 'text'
                    },
                    {
                        xtype: 'datefield',
                        name: 'color',
                        fielLabel: 'color field',
                        anchor: '100%',
                        format: 'd.m.Y',
                        reference: 'date'
                    }
                ],
                fbar: [
                    { text: 'OK', reference: 'okBtn' },
                    { text: 'Cancel', reference: 'cancelBtn' }
                ]
            }
        }
    },
    dateFormat: 'd.m.Y',

    createPicker: function(){
        var me = this,
            popup = me.getPopup();

        // the window will actually be shown and will house the picker
        me.pickerWindow = popup = Ext.create(popup);

        popup.lookupReference('okBtn').on('click', 'onPickerOk', me);
        popup.lookupReference('cancelBtn').on('click', 'onPickerCancel', me);

        popup.on({
            close: 'onPickerCancel',
            scope: me
        });

        me.updateValue(me.getValue());

        return popup;
    },

    // ok picker button handler
    onPickerOk: function () {
        var me = this,
            popup = me.pickerWindow,
            textField = popup.lookupReference('text'),
            dateField = popup.lookupReference('date'),
            value = {
                text: textField.getValue(),
                date: dateField.getValue()
            };

        popup.hide();

        me.setValue(value);
    },

    // cancel picker button handler
    onPickerCancel: function () {
        var me = this,
            popup = me.pickerWindow;

        popup.hide();

        me.updateValue(me.getValue());
    },

    // override set value to support both string ("{text}, {date}")
    // and object ({ text: "{text}", date: "{date}" })
    setValue: function(value) {
        var me = this,
            text,
            date,
            v;

        if (Ext.isObject(value)) {
            value = value.text + ", " + Ext.Date.format(value.date, me.dateFormat);
        }

        me.callParent([ value ]);

        // always update in case opacity changes, even if value doesn't have it
        // to handle "hex6" non-opacity type of format
        me.updateValue(value);
    },

    // update values in picker fields
    updateValue: function (value) {
        var me = this,
            popup = me.pickerWindow,
            textField,
            dateField,
            text = value.text,
            date = value.date;

        if (!popup || !popup.isComponent) {
            return;
        }

        if (Ext.isString(value)) {
            value = value.split(',');
            text = (value[0] || '').trim();
            date = Ext.Date.parse((value[1] || '').trim(), me.dateFormat);
        } else if (Ext.isObject(value)) {
            text = value.text || '';
            date = value.date || '';
        }

        textField = popup.lookupReference('text');
        dateField = popup.lookupReference('date');

        if (!me.syncing) {
            me.syncing = true;

            textField.setValue(text);
            dateField.setValue(date);

            me.syncing = false;
        }
    }
});

小提琴：
它不仅仅是一个模板。
下面是textfield+datefield的示例选择器实现，只需将其调整为具有colorfield即可

// component has picker with both textfield and datefield;
// when picker is collapsed, data is displayed as "{text}, {date}"
Ext.define('ColorPicker', {
    extend: 'Ext.form.field.Picker',

    // picker template
    config: {
        popup: {
            lazy: true,
            $value: {
                xtype: 'window',
                closeAction: 'hide',
                referenceHolder: true,
                minWidth: 540,
                minHeight: 60,
                layout: 'form',
                header: false,
                resizable: true,
                items: [
                    {
                        xtype: 'textfield',
                        name: 'text',
                        fielLabel: 'text label',
                        anchor: '100%',
                        reference: 'text'
                    },
                    {
                        xtype: 'datefield',
                        name: 'color',
                        fielLabel: 'color field',
                        anchor: '100%',
                        format: 'd.m.Y',
                        reference: 'date'
                    }
                ],
                fbar: [
                    { text: 'OK', reference: 'okBtn' },
                    { text: 'Cancel', reference: 'cancelBtn' }
                ]
            }
        }
    },
    dateFormat: 'd.m.Y',

    createPicker: function(){
        var me = this,
            popup = me.getPopup();

        // the window will actually be shown and will house the picker
        me.pickerWindow = popup = Ext.create(popup);

        popup.lookupReference('okBtn').on('click', 'onPickerOk', me);
        popup.lookupReference('cancelBtn').on('click', 'onPickerCancel', me);

        popup.on({
            close: 'onPickerCancel',
            scope: me
        });

        me.updateValue(me.getValue());

        return popup;
    },

    // ok picker button handler
    onPickerOk: function () {
        var me = this,
            popup = me.pickerWindow,
            textField = popup.lookupReference('text'),
            dateField = popup.lookupReference('date'),
            value = {
                text: textField.getValue(),
                date: dateField.getValue()
            };

        popup.hide();

        me.setValue(value);
    },

    // cancel picker button handler
    onPickerCancel: function () {
        var me = this,
            popup = me.pickerWindow;

        popup.hide();

        me.updateValue(me.getValue());
    },

    // override set value to support both string ("{text}, {date}")
    // and object ({ text: "{text}", date: "{date}" })
    setValue: function(value) {
        var me = this,
            text,
            date,
            v;

        if (Ext.isObject(value)) {
            value = value.text + ", " + Ext.Date.format(value.date, me.dateFormat);
        }

        me.callParent([ value ]);

        // always update in case opacity changes, even if value doesn't have it
        // to handle "hex6" non-opacity type of format
        me.updateValue(value);
    },

    // update values in picker fields
    updateValue: function (value) {
        var me = this,
            popup = me.pickerWindow,
            textField,
            dateField,
            text = value.text,
            date = value.date;

        if (!popup || !popup.isComponent) {
            return;
        }

        if (Ext.isString(value)) {
            value = value.split(',');
            text = (value[0] || '').trim();
            date = Ext.Date.parse((value[1] || '').trim(), me.dateFormat);
        } else if (Ext.isObject(value)) {
            text = value.text || '';
            date = value.date || '';
        }

        textField = popup.lookupReference('text');
        dateField = popup.lookupReference('date');

        if (!me.syncing) {
            me.syncing = true;

            textField.setValue(text);
            dateField.setValue(date);

            me.syncing = false;
        }
    }
});

Fiddle:
我想你必须过度使用
setValue（）
选择器方法来处理你的复杂（对象）值。我可以做到，但我不知道如何处理“用户看到的字符串”。我想用日期等组件的值显示不同的字符串。您的问题是，默认情况下，picker
setValue（）
method会尝试将传递的参数字符串化。重写
setValue（）
方法，如果它是对象，则解析其参数；如果它是字符串，则直接设置它。将复杂（对象）值保存为
rawValue
，并将格式化值设置为picker字段。另外，通过将传递的对象原型重写为string（）方法，您可能可以获得预期的结果，但我猜这是一个糟糕的解决方案，因为我不确定ExtJS是否直接调用它。我猜您必须重写
setValue（）
选择器处理复杂（对象）值的方法。我可以这样做，但我不知道如何处理“用户看到的字符串”。我想用日期等组件的值显示不同的字符串。您的问题是，默认情况下，picker
setValue（）
method会尝试将传递的参数字符串化。重写
setValue（）
方法，如果它是对象，则解析其参数；如果它是字符串，则直接设置它。将您的复杂（对象）值保存为
rawValue
，并将格式化值设置为picker字段。另外，通过将传递的对象原型重写为string（）方法，您可能可以获得预期的结果，但我猜这是一个糟糕的解决方案，因为我不确定ExtJS是否直接调用它。