ExtJs之CheckBox学习小实例

xiaoyeshen · 2014-09-04 09:33 · 1244次阅读

    <%@ 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>  

文章代码转自:http://blog.csdn.net/woshisap/article/details/6663139
收藏

暂无评论

登录后可以进行评论。没有账号?马上注册