ExtJs 4 Radio Button Example

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...

ExtJs Radio Button 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());
  

 }

});

References

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.