Ext Js 4的Radio学习与实例

最新推荐文章于 2024-07-29 17:49:33 发布

波哥的技术积累

最新推荐文章于 2024-07-29 17:49:33 发布

阅读量7.5k

点赞数

分类专栏： Ext Js 文章标签： ext extjs function stylesheet flex layout

本文链接：https://blog.csdn.net/woshisap/article/details/6663186

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

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