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

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.