ExtJS Panel Inheritance/Base class

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'));

Answer 2

As a comment outside of your direct question, "DateTime" is a terrible name for a Panel subclass. You want someone coming along later to know what kind of class they are dealing with -- "DateTimeField" would be much better, based on how you're using it (although that implies a Field subclass as explained below...).

However, note that another potential issue since you are intending to use this Panel as a Field is that a FormPanel is going to expect its form fields to support the Ext.form.Field interface, which your "field" will not (i.e., you won't be able to add your DateTime object into a form's items config). So if your goal is to create a truly reusable component that can be treated as a Field, you're going to want to add methods like getValue, setValue, markInvalid, etc. that internally interact with your constituent fields. It's not a trivial task to get it all working smoothly.

(Not sure if this is your goal, but thought I would mention it since I've gone down this road myself).