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.
<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: ' <br/><b>Document Type</b>',
items: [{
boxLabel: '<img src="images/word.jpg"/> Word',
name: 'docType',
inputValue: 'getWord',
checked: true
},{
boxLabel: '<img src="images/acrobat.jpg"/> PDF',
name: 'docType',
id:'pdfButton',
inputValue: 'getPDF'
},{
boxLabel: '<img src="images/excel.jpg"/> Excel',
name: 'docType',
id:'csvButton',
inputValue: 'getCSV'
}
]
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
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.