PDA

View Full Version : Enable radio buttons on clicking check box in grid



Komal Vaswani
11 Jan 2011, 4:31 AM
Hi,
I am using checkbox and radio buttons in grid. I want to only enable the radio buttons of the row in which I have selected checkbox and other radio buttons should remain disable. For radio buttons I have used plugin. The following is the code that I am using, can anyone help how can I enable the radio buttons of the row in which I have checked checkbox. By default radio buttons should remain disable.




var winRoleRegister;
var frmRoleRegister;
var gridstore;

Ext.onReady(function() {
Ext.QuickTips.init();


var answers = [

new Ext.grid.RadioColumn({header: 'Read', inputValue: 1,dataIndex: 'answer', width: 75, align: 'center', sortable: true,checked:true}),
new Ext.grid.RadioColumn({header: 'Write', inputValue: 2, dataIndex: 'answer', width: 75, align: 'center', sortable: true}),
new Ext.grid.RadioColumn({header: 'Both', inputValue:3 , dataIndex: 'answer', width: 75, align: 'center', sortable: true})

];




gridstore = new Ext.data.JsonStore({
url : 'role.action?type=module',
remoteSort : false,
root : 'list',
idProperty : 'id',
fields : [{name:"modid"},{name:'modname'},{name:'answer'},{name:'compname'}
],
autoLoad : true
});
var sm= new Ext.grid.CheckboxSelectionModel();
rolegrid = new Ext.grid.GridPanel({
store:gridstore,
height:200,
sm:sm,
columns:[{
header:'No.',
dataIndex:'modid',
width:20,
hidden:true
},sm,
{ header:'Modules',
dataIndex:'modname'

}


].concat(answers),
plugins:answers


});

var creader = new Ext.data.JsonReader({
totalProperty: 'total',
root:'data',
idProperty:'id',
fields:[
{name: 'rolecompanyname', mapping: 'subcompName'}


]
});
var roledataSet = {
xtype : 'fieldset',
autoHeight : true,
layout : 'form',
align : 'center',
items : [ {
xtype : 'textfield',
fieldLabel : '<font color=#15428B><b>Company Name</font><font color=red>*</font></b>',
id : 'rolecompanyname',
name : 'rolecompanynames',
// style:'font-family:Georgia;font-size:10px;font-color:#ED7014;',
allowBlank : false,
vtype : 'alpha',
width : 200,
hidden:true
},
{
xtype : 'textfield',
fieldLabel : '<font color=#15428B><b>Role Name</font><font color=red>*</font></b>',
id : 'regRoleName',
name : 'regRoleName',
// style:'font-family:Georgia;font-size:10px;font-color:#ED7014;',
allowBlank : false,
vtype : 'alpha',
width : 200
}, {
xtype:'textfield',
fieldLabel : '<font color=#15428B><b>Role Description</b></font><font color=red>*</font>',
id : 'regRoleDescp',
name : 'regRoleDescp',
allowBlank : false,
vtype : 'alpha',
width : 200
},rolegrid

]

};
frmRoleRegister = new Ext.FormPanel({
// url:'UserRegistration.action',
// method:'POST',
frame : false,
border : false,
reader:creader,
buttonAlign : 'center',
bodyStyle : 'cellpadding:15px 15px 20px 15px 15px;',
width : 630,
labelWidth : 160,
id : 'frmRoleRegister',
items : [roledataSet],
buttonAlign : 'center',
buttons : [{
text : '<font color=#15428B size=2><b>Submit</b></font>',
id:'rolereg',
handler : function() {
var include_type = frmRoleRegister.form.getValues(true).replace(/&/g,', ');

var btntext = Ext.getCmp('rolereg').getText();

if(btntext == 'Update')
{
frmRoleRegister.getForm().submit({

method : 'POST',

waitTitle : 'Checking',
waitMsg : 'Validating ....',
success : function() {
Ext.Msg.alert('Registration Successful',
'Role has been successfully registered');

},
failure : function(form, action) {
if (action.failureType == 'server') {
Ext.Msg.alert('Error','Registration failed due to server error');
} else {

Ext.Msg .alert('Registration Failed','Email Id already exist or Manadatory fields are left unfilled !!!');
formRegister.getForm().reset();
}

}

});
}
else
{
var selectionModel = rolegrid.getSelectionModel();
//get the selected record
var record = selectionModel.getSelected();
alert("record is:" + record.toString);

var sm = rolegrid.getSelectionModel().getSelections();
var data = [];
for (i = 0; i <= sm.length - 1; i++)
{
data.push(sm[i].get('modid')+':'+sm[i].get('answer')+'#');
}




alert(data);
frmRoleRegister.getForm().submit({

url :'role.action?type=register',
params: {list: Ext.encode(data)},
method : 'POST',
waitTitle : 'Checking',
waitMsg : 'Validating ....',
success : function() {
Ext.Msg.alert('Registration Successful',
'Role has been successfully registered');

},
failure : function(form, action) {
if (action.failureType == 'server') {
Ext.Msg.alert('Error','Registration failed due to server error');
} else {
Ext.Msg .alert('Registration Failed','Email Id already exist or Manadatory fields are left unfilled !!!');
formRegister.getForm().reset();
}

}
});

}

}
}

]
});


// 01. Window Register
winRoleRegister = new Ext.Window({
title : '<font color=#15428B size=4><b><center>Role Registration</center></b></font>',
id : 'winRoleRegister',
layout : 'fit',
width : 510,
height : 400,

resizable : false,
closable : false,
items : [frmRoleRegister]
});
winRoleRegister.show();
}); //end of onready


Thanks,
Komal Vaswani

Condor
11 Jan 2011, 6:10 AM
Try the following css rules:

.x-grid3-radio-col, .x-grid3-radio-col-on {
display: none;
}
.x-grid3-row-selected .x-grid3-radio-col, .x-grid3-row-selected .x-grid3-radio-col-on {
display: block;
}

Komal Vaswani
11 Jan 2011, 9:53 PM
Hi,
Thanks a lot...it solved my problem.. :-)

Thanks,
Komal