Adding multiple registered types to panel stacks one on top of each other

[christythomas]

I'm having trouble adding multiples of my own registered xtypes to a panel. If I use my new registered xtype then I only get the last one added to the items array. If I switch them to xtype: 'panel' then it works as I expect. What could be wrong with my 'displayfield' registered type?

This is the code that creates the panel with multiple 'displayfield' xtypes used.


{
xtype: 'panel',
id: 'exec-views-informationsection-info',
style: 'background-color: #696969',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'end'
},
defaults: {
xtype: 'displayfield',
//xtype: 'panel',
//html: 'test',
flex: 1,
style: 'font-size: 60%'
},
items: [
{
title: 'High',
value: '423'
},{
title: 'Low',
value: '3'
},{
title: 'Average',
value: '192'
},{
title: 'Last Update',
value: '16:21'
}
]
}


This is the code that defines the 'displayfield'.



views.DisplayField = Ext.extend( Ext.Panel, {
value: 'Unknown Value',
id: 'views-displayfield',
defaults: {
padding: 10
},

initComponent: function(){
Ext.apply(this, {
items: [{
layout: {
type: 'hbox',
pack: 'top'
},
items: [{
html: this.title,
flex: 2
}, {
html: this.value,
style: 'text-align: right;',
flex: 1
}]
}]
});
views.DisplayField.superclass.initComponent.call(this);
}
});

Ext.reg('displayfield', views.DisplayField);

[christythomas]

The subject for this post is not entirely correct, the items do not stack. If I inspect the elements there is only one element on the panel and not the 4 that should have been added. When I inspect the elements when I use 'panel' xtype then the 4 elements exist. I'm not sure why the panel only contains one displayfield and not all 4. Thanks for any help.

[mitchellsimoens]

Thats because they have the same id. Remove the id property you specified in your views.DisplayField. Optimally, you shouldn't need to set ids at all.