How to create a Radio Buttons inside RadioGroup in ExtJs and query the current selection
In this example we have created a bunch of Radio buttons with the same name so that only one is selected at a time and then wrap them inside a RadioGroup container. RadioGroup provides a set of convenience methods and layout to arrange the Radio buttons into columns. Here is the example...
|
Application HTML file - index.html
<html>
<head>
<title>ExtJs Radio button Example</title>
<link rel="stylesheet" type="text/css"
href="extjs/resources/css/ext-all.css">
<style type="text/css">
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'myApp',
appFolder: 'app/radioButtons',
controllers: [
'MyController'
],
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
height: 250,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
labelWidth: 150,
margin: '5 5 5 5 '
},
items: [
{
xtype: 'radiogroup',
fieldLabel: 'Choose your favorite',
//arrange Radio Buttons into 2 columns
columns: 2,
itemId: 'myFavorite',
items: [
{
xtype: 'radiofield',
boxLabel: 'ExtJs',
name: 'framework',
checked: true,
inputValue: 'extjs'
},
{
xtype: 'radiofield',
boxLabel: 'DoJo',
name: 'framework',
inputValue: 'dojo'
},
{
xtype: 'radiofield',
boxLabel: 'jQuery',
name: 'framework',
inputValue: 'jQuery'
},
{
xtype: 'radiofield',
boxLabel: 'Prototype',
name: 'framework',
inputValue: 'prototype'
}
]
},
{
xtype: 'button',
text: 'Press here to see Selection below...'
},
{
xtype: 'displayfield',
value: '',
itemId: 'yourSelection',
fieldLabel: '<b>You have Selected</b>',
anchor: '100%'
}
]
});
}
});
</script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
Application Controller - MyController.js
Ext.define('myApp.controller.MyController', {
extend : 'Ext.app.Controller',
init : function() {
this.control({
'container' : {
render : this.onContainerRendered
},
'container button' : {
click : this.onButtonClick
}
});
},
onContainerRendered : function() {
// console.log('The container was rendered');
},
onButtonClick : function(button) {
// console.log('Button Click');
// get reference to the container
var myView = button.up('container');
//get the checked Radio button
var myFavorite = myView.getComponent('myFavorite').getChecked()[0];
var yourSelection = myView.getComponent('yourSelection');
//find the value of the selected Radio button
yourSelection
.setValue("Label is: " + myFavorite.boxLabel +
" and Value is: " + myFavorite.getGroupValue());
}
});
No comments:
Post a Comment
NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.