Question

I am trying to create my own Date/Time field. I know there are a few that others have made, I’m making my own .

My question is as follows. I want to create a new object, DateTime, which extends Ext.Panel. I specify some properties for width, height, etc but I also specify the values for the items property which will contain a date field and a time field. When I try to actually instantiate the created object, I get an error saying “Object or property not supported”. When I go into the error, it seems that the items collection throws an error The code is as follows:

var dateField = new AppealDate({
    id: 'dateField',
    tabIndex: 0,
    fieldLabel: '',
    msgTarget: 'under'
});
var timeField = new Ext.form.TimeField({
    id: 'timeField',
    tabIndex: 0,
    fieldLabel: '',
    msgTarget: 'under'
});
var DateTime = Ext.extend(Ext.Panel, {
    id: '',
    xtype: 'panel',
    fieldLabel: '',
    layout: 'table',
    layoutConfig: {
        columns: 2
    },
    items: [dateField, timeField]
});

var dateTimeField = new DateTime(); //this throws an error

Answer 1

Your class is missing initComponent. You also need to render the panel somewhere.

DateTime = Ext.extend(Ext.Panel, {
     initComponent: function() {
         // define dateField, timeField here.
         this.dateField = new AppealDate({
             id: 'dateField',
             msgTarget: 'under'
         });
          this.timeField = new Ext.form.TimeField({
             id: 'timeField',
             msgTarget: 'under'
         });
         Ext.apply(this, {
             items: [this.dateField, this.timeField]
         });
         DateTime.superclass.initComponent.call(this);
     }
});

var dateTimeField = new DateTime();
dateTimeField.render(Ext.get('someDiv'));