Проблема ExtJS Panel

Question

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

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

Эта линия:

AppealDateTime.superclass.initComponent.call(this); 

не совпадает с определением класса. Он должен быть

DateTime.superclass.initComponent.call(this); 

Answer 2

Уведомление вы создаете 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 в противоположность ид, чтобы избежать глобальных идентификаторов, которые снова работают против наличия нескольких копий компонента