Ext Js 4的Radio学习与实例

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:程序效果图


评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

波哥的技术积累

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值