【原】基础篇:第十一篇,Ext组件系列之--为单选和复选按钮添加事件
为单选和复选按钮添加事件，本篇例子来自一个朋友的询问：如何给单选组件添加事件，这里对单选和复选同时做了说明添加的方式，其实添加事件是很简单的，这里举出了三种添加事件的方式。
先看看效果图
因为不涉及后台的交互，这里只提供前台的html页面的Ext的实现
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="button"></div>
<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");
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://debugger;
[
'请选择你的爱好','',
{
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:"playFoot",
inputValue : '0'
}
]
});
win.show();
//为踢足球添加事件
var playFoot = Ext.getCmp("playFoot");
playFoot.addListener("check",function()//添加事件
{
if(playFoot&&playFoot.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+playFoot.boxLabel+"]");
}
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
