Ext Js4 CheckBox学习与实例

最新推荐文章于 2022-04-09 08:24:51 发布

波哥的技术积累

最新推荐文章于 2022-04-09 08:24:51 发布

阅读量5.7k

点赞数

分类专栏： Ext Js 文章标签： ext extjs function stylesheet string path

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

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

1：程序代码

<%@ 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>CheckBox</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', {
	    bodyPadding: 10,
	    width      : 300,
	    title      : '社会调查',
	    items: [
	        {
	            xtype      : 'fieldcontainer',
	            fieldLabel : '您的爱好',
	            defaultType: 'checkboxfield',
	            items: [
	                {
	                    boxLabel  : '唱歌',
	                    name      : 'hobby',
	                    inputValue: '1',
	                    id        : 'sing'
	                }, {
	                    boxLabel  : '跳舞',
	                    name      : 'hobby',
	                    inputValue: '2',
	                    checked   : true,
	                    id        : 'dance'
	                }, {
	                    boxLabel  : '看书',
	                    name      : 'hobby',
	                    inputValue: '3',
	                    id        : 'read'
	                }
	            ]
	        }
	    ],
	    bbar: [
	        {
	            text: '选择唱歌',
	            handler: function() {
	                var checkbox = Ext.getCmp('sing');
	                checkbox.setValue(true);
	            }
	        },
	        '-',
	        {
	            text: '全选',
	            handler: function() {
	                var checkbox1 = Ext.getCmp('sing'),
	                    checkbox2 = Ext.getCmp('dance'),
	                    checkbox3 = Ext.getCmp('read');
	
	                checkbox1.setValue(true);
	                checkbox2.setValue(true);
	                checkbox3.setValue(true);
	            }
	        },
	        {
	            text: '全不选',
	            handler: function() {
	                var checkbox1 = Ext.getCmp('sing'),
	                    checkbox2 = Ext.getCmp('dance'),
	                    checkbox3 = Ext.getCmp('read');
	
	                checkbox1.setValue(false);
	                checkbox2.setValue(false);
	                checkbox3.setValue(false);
	            }
	        }, 
	        {
	            text: '反选',
	            handler: function() {
	                 var checkbox1 = Ext.getCmp('sing'),
	                    checkbox2 = Ext.getCmp('dance'),
	                    checkbox3 = Ext.getCmp('read');
	                    
	                if(checkbox1.getValue()) {
	                     checkbox1.setValue(false);
	                     
	                } else {
	                      checkbox1.setValue(true);
	                      
	                }
	                if(checkbox2.getValue()) {
	                    checkbox2.setValue(false);
	                    
	                } else {
	                     checkbox2.setValue(true);
	                     
	                }
	                if(checkbox3.getValue()) {
	                     checkbox3.setValue(false);
	                     
	                } else {
	                      checkbox3.setValue(true);
	                      
	                }
	            }
	        }
	    ],
	    renderTo: Ext.getBody()
	});
        
     });
        
   </script>
  </head>
  <body>
  </body>
  
</html>

2：程序效果图