PDA

View Full Version : Form Panel + Dynamic Combo Boxes?



KJD
13 Dec 2009, 7:03 PM
I am working on an application based from the form-grid example. The left side shows the grid information and in the panel on the right side I have one combo box for Mode selection. I would like three selections on the Mode combo to control what the other combos boxes show afterward. The text and selections of each of these other combo boxes change depending upon the selection of the Mode combo box.
I have the code below working but I can not get the three remaining combo boxes to work correctly. Can anyone offer some ideas as to what I am doing wrong?



// Combo box for Mode selection
{xtype: 'combo',
fieldLabel: 'Mode',
store:['D2D', 'Timed', 'Event'],
emptyText:'Select mode',
triggerAction: 'all',
name: 'mode',
mode: 'local',
listeners:{
select: function(combo, record, index) // Call this when button is clicked
{
// D2D control
if(index == '0'){
console.log("D2D control");
// Combo box for selection of levels #1
{xtype: 'timefield', fieldLabel: 'D2D On Level 1', name: 'lastChange'},
{xtype: 'timefield', fieldLabel: 'D2D Off Level 1', name: 'lastChange'},

// Combo box for selection of levels #2
{xtype: 'timefield', fieldLabel: 'D2D On Level 2', name: 'lastChange'},
{xtype: 'timefield', fieldLabel: 'D2D Off Level 2', name: 'lastChange'},
}
// Timed control
if(index == '1'){
console.log("Timed control");
// Combo box for selection of timed control #1
{xtype: 'timefield', fieldLabel: 'Timed On 1', name: 'lastChange'},
{xtype: 'timefield', fieldLabel: 'Timed Off 1', name: 'lastChange'},

// Combo box for selection of timed control #2
{xtype: 'timefield', fieldLabel: 'Timed On 2', name: 'lastChange'},
{xtype: 'timefield', fieldLabel: 'Timed Off 2', name: 'lastChange'},
}
// Event control
if(index == '2'){
console.log("Event control");
// Combo box for selection of Event control
{xtype: 'timefield', fieldLabel: 'Event On', name: 'lastChange'},
{xtype: 'timefield', fieldLabel: 'Event Off 2', name: 'lastChange'},
}
//
}
}
},