Example for customized ExtJS picker that contains a form

gistfile1.txt

Ext.define('Test', {
    extend:'Ext.form.field.Picker',
    alias: 'widget.test',
    requires: ['Ext.form.field.Date', 'Ext.picker.Time', 'Ext.view.BoundListKeyNav', 'Ext.Date'],
    alternateClassName: ['Test'],

    /**
     * @cfg {String} [triggerCls='x-form-time-trigger']
     * An additional CSS class used to style the trigger button. The trigger will always get the {@link #triggerBaseCls}
     * by default and triggerCls will be **appended** if specified.
     */
    triggerCls: Ext.baseCSSPrefix + 'form-time-trigger',

    /**
     * @private
     * Creates the {@link Ext.picker.Time}
     */
    createPicker: function() {
        var me = this,
            picker = new Ext.panel.Panel({
                pickerField: me,
                floating: true,
                hidden: true,
                ownerCt: this.ownerCt,
                renderTo: document.body,
                title: 'khanh beo',
                height: 200,
                html: "<select><option>A</option><option>D</option><option>B</option></select><input type='checkbox'/><input/><textarea></textarea>"
            });

        return picker;
    }
});


Ext.application({
    name: 'MyApp',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
        	layout: 'fit',
            items: {
        		 title: false,
        		 width: 200,
        		 bodyPadding: 10,
        		 renderTo: Ext.getBody(),
        		 items: [{
        		     xtype: 'test',
        		     minDate: new Date(),
        		     handler: function(picker, date) {
        		         // do something with the selected date
        		     }
        		 }]
        	}
        });
    }
});

I can't seem to get this basic picker to work.
The picker displays okay but the handler function is never triggered.

Working