PDA

View Full Version : set Read Only RadioGroup



eaglefox12
3 Jun 2013, 8:50 AM
Is there a way to set a radioGroup as readOnly. I know checkboxes and individual radiobuttons can be set as readOnly, but I just can't find a way for radioGroups. Any help???

friend
3 Jun 2013, 12:24 PM
It's fairly trivial to extend Ext.form.RadioGroup and tack on a setReadOnly(boolean) method:



<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-theme-gray/ext-theme-gray-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

Ext.define('MyApp.widgets.ReadOnlyRadioGroup', {
extend: 'Ext.form.RadioGroup',
alias: 'widget.readonlyradiogroup',
setReadOnly: function(boolean) {
var buttons = this.items.length;
for (var i = 0; i < buttons; i++) {
this.items.get(i).setReadOnly(boolean);
}
}
});

Ext.create('Ext.window.Window', {
height: 150,
title: 'Read Only Radio Group',
width: 300,
items: [{
xtype: 'readonlyradiogroup',
columns: 1,
vertical: true,
items: [{
boxLabel: 'Item 1', name: 'rb', inputValue: '1'
},{
boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true
},{
boxLabel: 'Item 3', name: 'rb', inputValue: '3'
}]
}],
buttons: [{
text: 'Set r/o true',
handler: function(btn, evt) {
btn.up('window').down('readonlyradiogroup').setReadOnly(true);
}
},{
text: 'Set r/o false',
handler: function(btn, evt) {
btn.up('window').down('readonlyradiogroup').setReadOnly(false);
}
}]
}).show();
});
</script>

</head>
<body>
</body>
</html>

eaglefox12
4 Jun 2013, 5:55 AM
Thank you friend... it is indeed trivial. Why doesn't it have a readOnly property like checkbox and other form fields.

friend
4 Jun 2013, 6:53 AM
A RadioGroup is mainly a container, where the concept of 'read only' doesn't really apply to a container.