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