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

11 comments :

  1. The code is very simple and easy to understand. More java tutorial can bet get from top essay writing service

    ReplyDelete
  2. [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] نشتري الاثاث المستعمل بجدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] نشتري الاثاث المستعمل بمكة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شراء الاثاث المستعمل بجدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شراء الاثاث المستعمل بمكة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] ارقام شراء الاثاث المستعمل بجدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] ارقام شراء الاثاث المستعمل بمكة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] ارقام محلات شراء الاثاث المستعمل بجدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شراء اثاث مستعمل بجدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شراء اثاث مستعمل جدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شركات شراء اثاث مستعمل في جدة [/URL]
    [URL="http://fcnsc.com/used-furniture-in-jed-and-mec//"] شراء الاثاث المستعمل بمكة المكرمة [/URL]

    [URL="http://fcnsc.net/p651//"]محلات الاثاث المستعمل بالمدينة المنورة[/URL]
    [URL="http://fcnsc.net/p651//"]ارقام الاثاث المستعمل بالمدينة المنورة [/URL]
    [URL="http://fcnsc.net/p651//"]حقين الاثاث المستعمل بالمدينة المنورة [/URL]
    [URL="http://fcnsc.net/p651//"]شراء الاثاث المستعمل بالمدينة المنورة [/URL]
    [URL="http://fcnsc.net/p651//"]شراء اثاث مستعمل بالمدينة المنورة[/URL]

    ReplyDelete
  3. من المعروف ان نظافة المنازل من بين اهم الخدمات الضرورية في التنظيف والترقية بمنازلنا الى مصاف المنازل العصرية والتي عرفت تنظيفا عصريا من شانه ان يوفر لساكنته ظروفا حياتية راقية ولابد من توفر هيئة تختص في المجال مع تقديم ضمانات متكاملة من شانه ان تجعل الافراد يضمنون نجاح خدمة التنظيف ولا حاجة للمزيد من ضياع الاموال عبر طلبات خدمة نظافة المنازل التي لا تلبي حاجياتهم ولا تتماشى مع رغباتهم لأن العديد من شركات تنظيف المنازل تسعى فقط الى عرض خدماتها عبر طرق ترويجية فحسب من اجل كسب المال فقط دون مراعاة الوازع الاخلاقي والضمير المهني الذي يحتم على مدراء مثل هاته الشركات ان يسعوا خلف ارضاء العملاء ليس اكثر من هذا عبر اتقان تنظيف المنازل . شركة تنظيف خزانات بالقصيم
    شركة مكافحة حشرات بالدمام
    شركة تنظيف بابها
    شركة تسليك مجارى بتبوك
    شركة تنظيف منازل بتبوك
    شركة تنظيف بالطائف
    شركة نقل عفش بالخرج

    ReplyDelete