Question

我正在尝试创建自己的日期/时间字段。我知道其他人已经制作了一些，我正在制作自己的。

我的问题如下。我想创建一个新对象DateTime，它扩展了Ext.Panel。我为宽度，高度等指定了一些属性，但我还指定了items属性的值，该属性将包含日期字段和时间字段。当我尝试实际实例化创建的对象时，我收到一条错误，指出“对象或属性不受支持”。当我进入错误时，似乎items集合引发错误代码如下：

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

您的类缺少initComponent。您还需要在某处渲染面板。

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

作为您直接问题之外的评论，“DateTime”是Panel子类的可怕名称。你希望后来有人知道他们正在处理什么类的课程 - “DateTimeField”会更好，基于你如何使用它（尽管这意味着Field子类，如下所述。）。

但是，请注意，由于您打算将此Panel用作字段，因此另一个潜在问题是FormPanel将期望其表单字段支持{“1}}接口，而您的”字段“不会（即，您将无法将DateTime对象添加到表单的Ext.form.Field配置中）。因此，如果您的目标是创建一个可以被视为字段的真正可重用组件，那么您将需要添加items，getValue，setValue等方法。内部与您的组成领域互动。让这一切顺利进行并不是一项微不足道的任务。

（不确定这是不是你的目标，但我想自从我走上这条路以来就提到它了。）

ExtJS Panel继承/基类

2 个答案: