PDA

View Full Version : problem with the radio buttons



bharathslip9
22 Feb 2010, 12:18 PM
i have problem with radio button. i have used two buttons.

In that two radio buttons, in that first radio button label is DHCP and 2nd radio button label is Manual.

If i select DHCP radio button it should show a drop down box which contains 3 selectable options in that,
and if i select manual radio button then it should display 2 text fields and drop down box and the drop down box again shows 4 option in that.


{
xtype: 'radiogroup',
fieldLabel: '<b>IP Configuration </b>',
items: [{
boxLabel: 'DHCP',
name: 'ipv6mode',
id: 'id_v6dhcp',
inputValue: 4,
listeners: {
check: function(box, checked){
var p = Ext.getCmp('id_form_ipv6Edit').getForm();

p.findField('ipv6add').setDisabled(checked);
p.findField('ipv6mask').setDisabled(checked);
Ext.getCmp('id_v6mopt').setDisabled(checked);
Ext.getCmp('id_v6dopt').setDisabled(!checked);

if(checked){
Ext.getCmp('id_v6man').hide();
Ext.getCmp('id_v6dhc').show();
}
else {
Ext.getCmp('id_v6dhc').hide();
Ext.getCmp('id_v6man').show();
}
}
}
},{
boxLabel: 'Manual',
name: 'ipv6mode',
id: 'id_v6manual',
inputValue: 6
}]
},{
xtype: 'displayfield',
hideLabel:true,
value: ' ',
height : 22
},{
xtype: 'panel',
id: 'id_v6dhc',
layout: 'form',
items: [{
xtype: 'combo',
fieldLabel: '<b>Options </b>',
id: 'id_v6dopt',
hiddenName: 'ipv6option',
width: 100,
editable: false,
store: new Ext.data.SimpleStore({
fields: ['option', 'value'],
data: [
['Full rapid-commit', '2'],
['Full', '1'],
['Disabled', '0']
],
autoLoad: true
}),
valueField: 'value',
displayField: 'option',
triggerAction: 'all',
minListWidth: 100,
width: 100,
mode: 'local',
value: '1',
forceSelection: true
}]
},{
xtype: 'panel',
id: 'id_v6man',
hidden: true,
layout: 'form',
items: [{
xtype: 'textfield',
fieldLabel: '<b>IP Address </b>',
name: 'ipv6add',
value: 'fe80::2001',
allowBlank: false,
vtype: 'IPv6'
},{
xtype: 'textfield',
fieldLabel: '<b>Subnet Prefix Length </b>',
name: 'ipv6mask',
value: '64',
allowBlank: false,
vtype: 'IPv6Subnet'
},{
xtype: 'combo',
fieldLabel: '<b>Options </b>',
id: 'id_v6mopt',
hiddenName: 'ipv6option',
editable: false,
disabled:true,
store: new Ext.data.SimpleStore({
fields: ['option', 'value'],
data: [
['None', '1'],
['Anycast', '2'],
['eui-64', '3'],
['LinkLocal', '4']
],
autoLoad: true
}),
valueField: 'value',
displayField: 'option',
triggerAction: 'all',
minListWidth: 100,
width: 100,
mode: 'local',
value: '1',
forceSelection: true
}]
}


the problem here is when i was toggling between this radio buttons they were not showing the fields associated to them properly(i mean fields which are associated to manual radio button are not display even if it selected). i think the radio buttons events are not firing properly. i have read lot of blogs on extjs forms but

Here is the piece of code which i have written and problem here is when i have selected the DHCP radio button and then manual it is displaying the option menus and fields properly for the first time, but if i repeat selecting the radio buttons contineuosly, it is showing the DHCP radio button options and text fields related to them and it is not should showing the fields and options which are related to manual even if i select the radio button manual.
xtype: 'radiogroup',
fieldLabel: '<b>IP Configuration </b>',
items: [{
boxLabel: 'DHCP',
name: 'ipv6mode',
id: 'id_v6dhcp',
inputValue: 4,
listeners: {
check: function(box, checked){

var p = Ext.getCmp('id_form_ipv6Edit').getForm();

p.findField('ipv6add').setDisabled(checked);
p.findField('ipv6mask').setDisabled(checked);
Ext.getCmp('id_v6mopt').setDisabled(checked);
Ext.getCmp('id_v6dopt').setDisabled(!checked);

if(checked){
Ext.getCmp('id_v6man').hide();
Ext.getCmp('id_v6dhc').show();
}
else {
Ext.getCmp('id_v6dhc').hide();
Ext.getCmp('id_v6man').show();
}
}
}

please can you tell me where am i going wrong,


function loadIpv6(){
var vid = Ext.getCmp('id_grid_vlan').getSelectionModel().getSelected().data.vid;

Ext.getCmp('id_form_ipv6').getForm().load({
url: 'json.html?method:getIpv6&vid=' + vid,
method:'GET',
success: function(f,a){
var form1 = Ext.getCmp('id_form_ipv6').getForm();
var form2 = Ext.getCmp('id_form_ipv6Edit').getForm();

form2.findField('ipv6gateway').setValue( form1.findField('ipv6gateway').getValue() );
form2.findField('ipv6add').setValue( form1.findField('ipv6add').getValue() );
form2.findField('ipv6mask').setValue( form1.findField('ipv6mask').getValue() );

var en1 = form1.findField('ipv6ena').getValue();
var en2 = (en1=='Enabled') ? 1 : 0;
form2.findField('ipv6ena').setValue( en2 );

var auto1 = form1.findField('ipv6auto').getValue();
var auto2 = (auto1=='Enabled') ? 1 : 0;
form2.findField('ipv6auto').setValue( auto2 );


}
});