2010-06-26 91 views
0

我想创建一个包含日期和时间字段的面板。麻烦的是当我试图把它放在另一个面板内时。日期和时间字段不显示。我究竟做错了什么?这是我迄今为止的面板定义的代码。扩展故障ExtJS面板

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

回答

0

这条线:

AppealDateTime.superclass.initComponent.call(this); 

不符合您的类定义。它应该是

DateTime.superclass.initComponent.call(this); 
1

通知你的原型,而不是每个的DateTime对象创建的DateFieldtimeField

也许这是给你一个难的时间,如果你创建多个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的再次针对有你的组件的多个副本工作