Не знаю, почему мой подклассовый элемент управления не отображается

Question

Я пытаюсь создать подробную форму позиции в своем приложении. Я создал подкласс Ext.Panel с тремя элементами управления формы. Затем я начал добавлять этот элемент управления к моей панели просмотра. Только один появляется. Остальные установлены на высоте 0. Вот код:

app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, { 
    layout: { 
     type: 'hbox', 
     pack: 'center' 
    }, 
    items: [ 
     new Ext.form.Spinner({ 
      width: 150 
     }), 
     new Ext.form.Text({ 
      placeHolder: 'Description', 
      width: 400 
     }), 
     new Ext.form.Text({ 
      placeHolder: 'Price', 
      width: 150 
     }) 
    ] 
}); 

app.views.Forms.Materials = new Ext.Panel({ 
    fullscreen: true, 
    layout: { 
     type: 'vbox', 
     align: 'stretch' 
    }, 
    items: [ 
     new app.views.Forms.materialsLineItem(), 
     new app.views.Forms.materialsLineItem(), 
     new app.views.Forms.materialsLineItem() 
    ] 
});

Answer 1

Мда это работает, если вы объявите ваши компоненты формы с помощью литералов объектов следующим образом:

app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, { 
    layout: { 
     type: 'hbox', 
     pack: 'center' 
    }, 
    items: [{ 
     xtype: 'spinnerfield', 
     width: 150 
    }, { 
     xtype: 'textfield', 
     placeHolder: 'Description', 
     width: 400 
    }, { 
     xtype: 'textfield', 
     placeHolder: 'Price', 
     width: 150 
    }] 
}); 

Я думаю, что только ваш путь создал поля один раз, и sencha не позволяет добавлять один и тот же компонент в несколько контейнеров, поэтому первые две панели на самом деле ничего не имели в них.

Если вы посмотрите на элементы в консоли JavaScript Chrome, вы увидите, что первые две панели - это только пустые div.