Ext Js 4的Radio学习与实例

来源：互联网发布：sql注入处理编辑：程序博客网时间：2024/05/17 09:01

1：基本知识

Single radio field. Similar to checkbox, but automatically handles making sure only one radio is checkedat a time within a group of radios with the same name.

Labeling:In addition to the standard field labeling options, radio buttonsmay be given an optional boxLabel which will be displayed immediately to the right of the input. AlsoseeExt.form.RadioGroup for a convenient method of grouping related radio buttons.

Values:The main value of a Radio field is a boolean, indicating whether or not the radio is checked.

The following values will check the radio:true'true''1''on'

Any other value will uncheck it.

In addition to the main boolean value, you may also specify a separate inputValue. This will be sentas the parameter value when the form is submitted. You will want to set thisvalue if you have multiple radio buttons with the samename, as is almost always the case.

2：程序代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>Ext.form.field.Radio</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="ExtJS4/resources/css/ext-all.css" />    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>        <script type="text/javascript" src="ExtJS4/ext-all.js" ></script>    <script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>         <script type="text/javascript" >      Ext.onReady(function() {Ext.create('Ext.form.Panel', {    title      : 'Order Form',    width      : 300,    bodyPadding: 10,    renderTo   : Ext.getBody(),    items: [        {            xtype      : 'fieldcontainer',            fieldLabel : 'Size',            defaultType: 'radiofield',     //定义为radiofield            defaults: {                flex: 1            },            layout: 'hbox',            items: [                {                    boxLabel  : 'M',                    name      : 'size',                    inputValue: 'm',                    id        : 'radio1'                }, {                    boxLabel  : 'L',                    name      : 'size',                    inputValue: 'l',                    id        : 'radio2'                }, {                    boxLabel  : 'XL',                    name      : 'size',                    inputValue: 'xl',                    id        : 'radio3'                }            ]        },        {            xtype      : 'fieldcontainer',            fieldLabel : 'Color',            defaultType: 'radiofield',            defaults: {                flex: 1            },            layout: 'hbox',            items: [                {                    boxLabel  : 'Blue',                    name      : 'color',                    inputValue: 'blue',                    id        : 'radio4'                }, {                    boxLabel  : 'Grey',                    name      : 'color',                    inputValue: 'grey',                    id        : 'radio5'                }, {                    boxLabel  : 'Black',                    name      : 'color',                    inputValue: 'black',                    id        : 'radio6'                }            ]        }    ],    bbar: [        {            text: 'Smaller Size',            handler: function() {                var radio1 = Ext.getCmp('radio1'),     //选择各个radio的引用                    radio2 = Ext.getCmp('radio2'),                    radio3 = Ext.getCmp('radio3');                //if L is selected, change to M                if (radio2.getValue()) {                    radio1.setValue(true);                    return;                }                //if XL is selected, change to L                if (radio3.getValue()) {                            radio2.setValue(true);                    return;                }                //if nothing is set, set size to S                radio1.setValue(true);            }        },        {            text: 'Larger Size',            handler: function() {                var radio1 = Ext.getCmp('radio1'),                    radio2 = Ext.getCmp('radio2'),                    radio3 = Ext.getCmp('radio3');                //if M is selected, change to L                if (radio1.getValue()) {                    radio2.setValue(true);                    return;                }                //if L is selected, change to XL                if (radio2.getValue()) {                    radio3.setValue(true);                    return;                }                //if nothing is set, set size to XL                radio3.setValue(true);            }        },        '-',        {            text: 'Select color',            menu: {                indent: false,                items: [                    {                        text: 'Blue',                        handler: function() {                            var radio = Ext.getCmp('radio4');                            radio.setValue(true);                        }                    },                    {                        text: 'Grey',                        handler: function() {                            var radio = Ext.getCmp('radio5');                            radio.setValue(true);                        }                    },                    {                        text: 'Black',                        handler: function() {                            var radio = Ext.getCmp('radio6');                            radio.setValue(true);    //选中该radio                        }                    }                ]            }        }    ]});});           </script>  </head>    <body>  </body>  </html>

3：程序效果图