View Full Version : Grouping containers in widgits

21 Sep 2010, 5:11 AM

We are developing a widget that consists of two combo boxes put together.
The functionality we want is simple: The choice made in the top comboBox modifies the
list of available items for the bottom comboBox. We want to access the
grouping of the two combo boxes as one component, such that we can call setValue
and getValue on the outer component to set/get the two combo boxes.

We have done this by extending Ext.Container, creating two combo boxes in
the initComponent method, and adding them to the Container.

CombinedCombos = Ext.extend(Ext.Container, {
initComponent: function() {
CombinedCombos.superclass.initComponent.apply(this, arguments);
xtype: 'combo',
ref: 'territoryCombo',
// ...
xtype: 'combo',
ref: 'timeZoneCombo',
// ...
To make BasicForm regard the container as a formField we set the isFormField
property to true and also implement getValue, setValue, getName, along with some
other needed properties (http://www.sencha.com/forum/showthread.php?84278-validate-problem-of-a-gridpanel-as-a-form-item&p=404811#post404811). This makes updateRecord and loadRecord methods
function correcly, but unfortunately it changes the rendering of CombinedCombos
such that the whole container including the labels is taken to be a form field.
This causes it to become aligned with other form fields in the form and that is
not intended.

Removing isFormField and other properties that make the container into a form
field, causes the container to render nicely, but because the container is no
longer a form field it is not updated with updateRecord and loadRecord as are
the other fields.

So the question is: How do we create a grouping of containers as described
here? Maybe a completely different approach is needed?