Broken picker icon when extending Ext.form.field.Picker

[comic96]

Hi,

I'm trying to create a custom picker by extending Ext.form.field.Picker but when my picker is rendered I'm seeing a kind of 'double' version of the picker icon:

My code looks like something like this:

Ext.define('Calendar', {
    requires: ['Ext.form.field.Picker',
               'CalendarView'
    ],
    
    extend: 'Ext.form.field.Picker',
    alias : 'widget.my_datefield',
    
    triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',
    
    matchFieldWidth: false,
    
    initComponent: function() {
        var me = this;


        me.callParent();
    },
    
    createPicker: function() {
        var me = this;
        
        return Ext.create('CalendarView', {
            pickerField: me,
            ownerCt: me.ownerCt,
            renderTo: document.body,
            floating: true,
            hidden: true,
            focusOnShow: true,
            keyNavConfig: {
                esc: function() {
                    me.collapse();
                }
            }
        });
    }
});

This results in the broken icon shown in the attachment to this post.

Can anyone tell me if/where I might be going wrong?

Many thanks

[mitchellsimoens]

Looks like some CSS and layout issue. The element for the icon needs to be like 16px wide to only show the one icon, can even do some background-repeat