Проблема расширения панели ExtJS

Question

Я пытаюсь создать панель, которая будет содержать поля даты и времени.Беда в том, когда я пытаюсь поместить это внутри другой панели.Поля даты и времени не отображаются.Что я делаю неправильно?Вот мой код для определения панели.

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

Обратите внимание, что вы создаете dateField и timeField для прототипа , а не для DateTime объекта.

Возможновам будет трудно, если вы создадите более одного DateTime объекта?

Чтобы решить эту проблему, переместите их определение в 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); 
},

Обратите внимание также на использование itemId в отличие от id , чтобы избежать глобальных идентификаторов, которые снова работают против нескольких копий вашего компонента

Answer 2

Эта строка:

AppealDateTime.superclass.initComponent.call(this);

не соответствует определению вашего класса. Должно быть

DateTime.superclass.initComponent.call(this);