Not sure why my subclassed control is not showing up - sencha-touch

Question

I'm trying to create a detailed line item form in my application. I created a subclass of Ext.Panel with three form controls in it. Then I started adding that control to my viewable Panel. Only one ever shows up. The others are set to a height of 0. Here's the code:
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

Hmm it works if you declare your form components using object literals like so:
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
}]
});
My guess is that your way only created the fields once and sencha doesn't let you add the same component to multiple containers, so the first two panels didn't actually have anything in them.
If you look at the elements in Chrome's JavaScript console you should see the first two panels are just empty divs.