fay
11 May 2007, 8:11 AM
Hi,
I've been struggling with this all afternoon and could do with a nod in the right direction, or a slap on the wrist for wasting half a day's work!
I have two comboboxes - cbSpeed and cbSpeedValues.
* When the user selects one of the first two entries ('50Hz'/'60Hz') in cbSpeed, cbSpeedValues behaves like a non-editable combo and the user can only select from the available list.
* When the user selects 'Diesel' from cbSpeed, cbSpeedValues defaults to '7000' and the user should be able to edit this. (In addition, the combo's trigger button is hidden, basically making it a TextField.)
My problem is that the following code works correctly in Internet Explorer 7 but not in FireFox 2. When I select 'Diesel' in IE7 cbSpeedValues loses its trigger button and becomes editable; in FF2 the trigger button goes, but the combobox is NOT editable.
<script type="text/javascript">
Ext.namespace('Ext.UnitsData');
Ext.UnitsData.Speed = [[0, '50 Hz'], [1, '60 Hz'], [2, 'Diesel']];
Ext.UnitsData.Speed50Hz = [[0, '*'], [1, '1450'], [2, '2950']];
Ext.UnitsData.Speed60Hz = [[0, '*'], [1, '1760'], [2, '3550']];
Ext.UnitsData.SpeedDiesel = [[0, '7000']];
Ext.onReady(function(){
var storeSpeed = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed});
var storeSpeed50Hz = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed50Hz});
var storeSpeed60Hz = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed60Hz});
var storeSpeedDiesel = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.SpeedDiesel});
var frm = new Ext.form.Form({labelWidth: 75});
var cbSpeed, cbSpeedValues;
frm.add(cbSpeed = new Ext.form.ComboBox({
fieldLabel: 'Nom. Speed',
hiddenName: 'Speed',
store: storeSpeed,
valueField: 'unitid',
displayField: 'unit',
allowBlank: false,
editable: false,
mode: 'local',
value:0,
width:90
}));
frm.add(cbSpeedValues = new Ext.form.ComboBox({
fieldLabel: 'Value',
hiddenName: 'SpeedValue',
store: storeSpeed50Hz,
valueField: 'unitid',
displayField: 'unit',
allowBlank: true,
editable: false,
mode: 'local',
value:0,
width:90
}));
frm.addButton({text: 'Info', handler: function () {
if (cbSpeed.getValue() == 2)
Ext.MessageBox.alert('Values', cbSpeedValues.getRawValue());
else
Ext.MessageBox.alert('Values', cbSpeedValues.getValue());
}
});
frm.render('divForm');
// Create event handlers
storeSpeed50Hz.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
storeSpeed60Hz.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
storeSpeedDiesel.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
cbSpeed.on('select', function(){
var unitKind = cbSpeed.getValue();
switch(unitKind)
{
case 0:
cbSpeedValues.store.loadData(Ext.UnitsData.Speed50Hz);
break
case 1:
cbSpeedValues.store.loadData(Ext.UnitsData.Speed60Hz);
break
default:
cbSpeedValues.store.loadData(Ext.UnitsData.SpeedDiesel);
};
cbSpeedValues.trigger.setDisplayed(unitKind < 2); // Hide the Trigger if unitKind > 1
cbSpeedValues.setEditable(unitKind == 2); // Make the combo Editable if unitKind > 1
cbSpeedValues.setValue(0);
});
});
</script>
</head>
<body>
<div id="divForm" style="width:310px;"></div>
</body>
</html>
For the life of me, I cannot figure out why it won't work in FF2. I've tried adding in
cbSpeedValues.el.dom.setAttribute('readOnly', (unitKind < 2));
if (unitKind == 2){
cbSpeedValues.el.on("keyup", cbSpeedValues.onKeyUp, cbSpeedValues);
}
before and after the call to setEditable but to no avail. It seems to have something to do with the initial 'editable: false;' in cbSpeedValues config but...??? Any ideas?
Thanks,
Fay
I've been struggling with this all afternoon and could do with a nod in the right direction, or a slap on the wrist for wasting half a day's work!
I have two comboboxes - cbSpeed and cbSpeedValues.
* When the user selects one of the first two entries ('50Hz'/'60Hz') in cbSpeed, cbSpeedValues behaves like a non-editable combo and the user can only select from the available list.
* When the user selects 'Diesel' from cbSpeed, cbSpeedValues defaults to '7000' and the user should be able to edit this. (In addition, the combo's trigger button is hidden, basically making it a TextField.)
My problem is that the following code works correctly in Internet Explorer 7 but not in FireFox 2. When I select 'Diesel' in IE7 cbSpeedValues loses its trigger button and becomes editable; in FF2 the trigger button goes, but the combobox is NOT editable.
<script type="text/javascript">
Ext.namespace('Ext.UnitsData');
Ext.UnitsData.Speed = [[0, '50 Hz'], [1, '60 Hz'], [2, 'Diesel']];
Ext.UnitsData.Speed50Hz = [[0, '*'], [1, '1450'], [2, '2950']];
Ext.UnitsData.Speed60Hz = [[0, '*'], [1, '1760'], [2, '3550']];
Ext.UnitsData.SpeedDiesel = [[0, '7000']];
Ext.onReady(function(){
var storeSpeed = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed});
var storeSpeed50Hz = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed50Hz});
var storeSpeed60Hz = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.Speed60Hz});
var storeSpeedDiesel = new Ext.data.SimpleStore({fields: ['unitid', 'unit'], data: Ext.UnitsData.SpeedDiesel});
var frm = new Ext.form.Form({labelWidth: 75});
var cbSpeed, cbSpeedValues;
frm.add(cbSpeed = new Ext.form.ComboBox({
fieldLabel: 'Nom. Speed',
hiddenName: 'Speed',
store: storeSpeed,
valueField: 'unitid',
displayField: 'unit',
allowBlank: false,
editable: false,
mode: 'local',
value:0,
width:90
}));
frm.add(cbSpeedValues = new Ext.form.ComboBox({
fieldLabel: 'Value',
hiddenName: 'SpeedValue',
store: storeSpeed50Hz,
valueField: 'unitid',
displayField: 'unit',
allowBlank: true,
editable: false,
mode: 'local',
value:0,
width:90
}));
frm.addButton({text: 'Info', handler: function () {
if (cbSpeed.getValue() == 2)
Ext.MessageBox.alert('Values', cbSpeedValues.getRawValue());
else
Ext.MessageBox.alert('Values', cbSpeedValues.getValue());
}
});
frm.render('divForm');
// Create event handlers
storeSpeed50Hz.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
storeSpeed60Hz.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
storeSpeedDiesel.on('load', function(){cbSpeedValues.setValue(0);}, this, {single: true});
cbSpeed.on('select', function(){
var unitKind = cbSpeed.getValue();
switch(unitKind)
{
case 0:
cbSpeedValues.store.loadData(Ext.UnitsData.Speed50Hz);
break
case 1:
cbSpeedValues.store.loadData(Ext.UnitsData.Speed60Hz);
break
default:
cbSpeedValues.store.loadData(Ext.UnitsData.SpeedDiesel);
};
cbSpeedValues.trigger.setDisplayed(unitKind < 2); // Hide the Trigger if unitKind > 1
cbSpeedValues.setEditable(unitKind == 2); // Make the combo Editable if unitKind > 1
cbSpeedValues.setValue(0);
});
});
</script>
</head>
<body>
<div id="divForm" style="width:310px;"></div>
</body>
</html>
For the life of me, I cannot figure out why it won't work in FF2. I've tried adding in
cbSpeedValues.el.dom.setAttribute('readOnly', (unitKind < 2));
if (unitKind == 2){
cbSpeedValues.el.on("keyup", cbSpeedValues.onKeyUp, cbSpeedValues);
}
before and after the call to setEditable but to no avail. It seems to have something to do with the initial 'editable: false;' in cbSpeedValues config but...??? Any ideas?
Thanks,
Fay