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

请注意，您在原型而不是每个 DateTime 对象上创建了 dateField 和 timeField 。

如果您创建多个 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 ，以避免全局ID再次违反组件的多个副本

Answer 2

这一行：

AppealDateTime.superclass.initComponent.call(this);

与您的班级定义不符。它应该是

DateTime.superclass.initComponent.call(this);

无法扩展ExtJS Panel

2 个答案: