单选框复选框添加事件

最新推荐文章于 2023-08-05 09:00:11 发布

原创最新推荐文章于 2023-08-05 09:00:11 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #CSS #JavaScript #游戏 #HTML #ViewUI

extjs 专栏收录该内容

18 篇文章

订阅专栏

本文档演示了如何使用ExtJS框架创建包含单选和复选按钮的窗体，并为这些控件添加事件监听器以实现交互功能。通过具体的代码示例，读者可以了解到如何初始化窗体组件及配置其属性。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%
            request.setAttribute("base", request.getContextPath());
%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>decode和encode的介绍</title>
        <link rel="stylesheet" type="text/css" href="${base}/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="${base}/ext/resources/css/xtheme-access.css" />
        <script type="text/javascript" src="${base}/ext/ext-base.js"></script>
        <script type="text/javascript" src="${base}/ext/ext-all.js"></script>
        <script type="text/javascript" src="${base}/ext/ext-lang-zh_CN.js"></script><!--中文映射-->

        <script type="text/javascript">
           
            function ready(){
                var win=new Ext.Window({//创建窗体对象
                    id:"win",
                    width:300,
                    height:200,
                    title:"单选和复选添加事件",
                    tbar:[
                        {
                            xtype:'radio',//类型为单选
                            id:'hege',
                            boxLabel:'合格',//单选旁边显示文本标签
                            name:'flag',//控件名称
                            inputValue:'0',//控件值
                            handler:function(){//添加事件
                                var hege=Ext.getCmp("hege");//通过id获取控件对象
                                if(hege&&hege.checked){//判断是否被选择
                                    Ext.Msg.alert("提示信息","你选择的是："+hege.boxLabel)
                                }
                            }
                        },
                        '',
                        {
                            xtype:'radio',
                            id:'buhege',
                            boxLabel:'不合格',
                            name:'flag',
                            inputValue:'0',
                            listeners:{"check":function(){//添加事件
                                    var buhege=Ext.getCmp("buhege");
                                    if(buhege && buhege.checked){
                                        Ext.Msg.alert("提示信息","你选择的是:"+buhege.boxLabel);
                                    }
                                }}
                        }
                    ],
                    bbar:
                    [
                    '请选择你的爱好','',
                    {
                        xtype:'checkbox',
                        boxLabel:'打游戏',
                        id:'playGame',
                        inputValue:'0',
                        listeners:{"check":function(){
                                var playGame=Ext.getCmp("playGame");
                                if(playGame && playGame.checked){
                                    Ext.Msg.alert("提示","你选择的是："+playGame.boxLabel);
                                }
                        }}
                    },
                    '',
                    {
                        xtype:'checkbox',
                        boxLabel:'看电影',
                        id:"seeFilm",
                        inputValue:'0',
                        handler:function(){
                            var seeFilm=Ext.getCmp("seeFilm");
                            if(seeFilm && seeFilm.checked){
                                Ext.Msg.alert("提示","你选择的是："+seeFilm.boxLabel);
                            }
                        }
                    },
                    '',
                    {
                        xtype:"checkbox",
                        boxLabel:'打篮球',
                        id:"playBasket",
                        inputValue:'0'
                    }
                    ]
                });
                win.show();//将窗体设置为显示
                //添加事件
                var playBasket=Ext.getCmp("playBasket");
                playBasket.addListener("check",function(){//
                if(playBasket && playBasket.checked){
                    Ext.Msg.alert("提示","你选择的是:"+playBasket.boxLabel);
                }
                })
            }
            Ext.onReady(ready) ;//参数为定义的函数,onReady是程序的入口
        </script>
    </head>
    <body>
        <div id="button"></div>
    </body>
</html>