ExtJS Panel Inheritance / Базовый класс

Question

Я пытаюсь создать собственное поле даты / времени.Я знаю, что есть некоторые, которые другие сделали, я делаю свои собственные.

Мой вопрос заключается в следующем.Я хочу создать новый объект DateTime, который расширяет Ext.Panel.Я указываю некоторые свойства для ширины, высоты и т. Д., Но я также указываю значения для свойства 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, как описано ниже ...) ,

Однако обратите внимание, что еще одна потенциальная проблема, поскольку вы намереваетесь использовать эту панель в качестве поля, заключается в том, что FormPanel ожидает, что ее поля формы будут поддерживать интерфейс Ext.form.Field, чего не будет в вашем «поле» (т. Е. Вы не сможете добавить свой объект DateTime в конфигурацию items формы). Поэтому, если ваша цель - создать действительно многократно используемый компонент, который можно рассматривать как поле, вам нужно добавить методы типа getValue, setValue, markInvalid и т. Д., Которые внутренне взаимодействуют с составляющими полями. , Это не тривиальная задача, чтобы все работало гладко.

(Не уверен, что это ваша цель, но подумал, что упомяну об этом, поскольку сам пошел по этому пути).