Not sure why my subclassed control is only showing up once.

[mfruhling]

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. I can see the others in safari's elements console, but they 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()
]
});

[evant]

You never give any dimensions, either via a flex/height.

[mfruhling]

I added a height of 100 to this, but it just moves the one set of controls down the screen 200 pixels. The first two controls I add only result in empty divs, but now they have a height of 100 pixels. I tried settings some debug points and stepping through the source code, but I can't seem to come across where my subclassed control is being instantiated.

[mfruhling]

I'm stuck on this. Anyone had any experience with loading multiple custom controls into a panel?