View Full Version : Broken picker icon when extending Ext.form.field.Picker

12 Nov 2012, 7:39 AM

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',

extend: 'Ext.form.field.Picker',
alias : 'widget.my_datefield',

triggerCls : Ext.baseCSSPrefix + 'form-date-trigger',

matchFieldWidth: false,

initComponent: function() {
var me = this;


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() {

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

14 Nov 2012, 10:14 AM
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