Blog Archive

ExtJs RadioGroup buttons with images for boxLabel

In this example we are displaying icons for the Radio button labels instead of just Text. Sometimes this is more user friendly as in this example where we want the user to choose an export format.

ExtJs RadioGroup button with images for boxLabel
<html>
<head>
   
    <title>ExtJs Radio buttons with Images</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
   
    <script type="text/javascript">
   
        Ext.Loader.setConfig({ 
            enabled: true 
        });

        Ext.application({
            name: 'SAMPLE',

            launch: function() {
                Ext.create('Ext.container.Viewport', {
                    layout: 'auto',
                    items: [
                        {
                        xtype: 'radiogroup',
                        vertical: true,
                        columns: 1,
                        width: 400,
                        fieldLabel: '&nbsp;<br/><b>Document Type</b>',
                        items: [{
                            boxLabel: '<img src="images/word.jpg"/>&nbsp;Word',
                            name: 'docType',
                            inputValue: 'getWord',
                            checked: true
                            },{
                            boxLabel: '<img src="images/acrobat.jpg"/>&nbsp;PDF',
                            name: 'docType',
                            id:'pdfButton',
                            inputValue: 'getPDF'
                            },{
                            boxLabel: '<img src="images/excel.jpg"/>&nbsp;Excel',
                            name: 'docType',
                               id:'csvButton',
                            inputValue: 'getCSV'
                            }
                        ]
                        }
                     ]
                });
            }
        });
</script>
</head>
<body>
</body>
</html>

ExtJs RadioGroup button with images for boxLabel