Trouble extending ExtJS Panel

Question

I am trying to create a panel which will contain both a Date and Time field. The trouble is when I try to put this inside of another panel. The date and time fields don't show up. What am I doing wrong? Here is my code so far for the panel definition.

var DateTime = Ext.extend(Ext.Panel, {
    id: '',
    xtype: 'panel',
    fieldLabel: '',
    layout: 'table',
    dateField : new Ext.form.DateField({ 
             id: 'dateField', 
             msgTarget: 'under' 
         }),
    timeField: new Ext.form.TimeField({ 
             id: 'timeField', 
             msgTarget: 'under',
             increment: 1 
         }), 
    layoutConfig: {
        columns: 2
    },
    initComponent: function() { 
         Ext.apply(this, { 
             items: [this.dateField, this.timeField] 
         }); 
         AppealDateTime.superclass.initComponent.call(this); 
     },
     getValue: function(){
        var returnValue = new Date();

        var dateValue = this.dateField.getValue();

        var timeValue = this.timeField.getValue();
        var hours = timeValue != null && timeValue != '' ? timeValue.split(':')[0]: 0;
        var minutes = timeValue != null && timeValue != '' ? timeValue.split(':')[1].split(' ')[0]: 0;

        returnValue.setDate(dateValue.getDate());
        returnValue.setMonth(dateValue.getMonth() + 1);
        returnValue.setFullYear(dateValue.getFullYear());
        returnValue.setHours(hours);
        returnValue.setMinutes(minutes);
        returnValue.setSeconds(0);

        return returnValue;
     },
     setValue: function(value)
     {
        var hours = value.getHours() % 12;
        var displayHours = hours - 12;

        this.dateField.setValue(value);
        this.timeField.setValue(value.getHours() + ":" + value.getMinutes() + " " + hours > 12 ? "PM" : "AM");
     }
});

Ext.reg('dateTime', DateTime);

Answer 1

This line:

AppealDateTime.superclass.initComponent.call(this);

does not match your class definition. It should be

DateTime.superclass.initComponent.call(this);

Answer 2

Notice you create the dateField and timeField on the prototype rather than per DateTime object.

Perhaps this is giving you a hard time if you create more than one DateTime object ?

To resolve this, move their definition into initComponent

initComponent: function() { 
     this.dateField = new Ext.form.DateField({ 
         itemId: 'dateField', 
         msgTarget: 'under' 
     }),
     this.timeField = new Ext.form.TimeField({ 
         itemId: 'timeField', 
         msgTarget: 'under',
         increment: 1 
     }), 
     Ext.apply(this, {
         items: [this.dateField, this.timeField] 
     }); 
     DateTime.superclass.initComponent.call(this); 
},

Note also the use of itemId as opposed to id to avoid global IDs that again work against having several copies of your component