[Reference] Radio

2011-11-21 16:40:47by ???

Radio

Radio是一组单项选择按钮组件。

上图是Radio组件在页面中的呈现。

Radio定义

在screen文件中我们通过<a:radio>标签来定义一个Radio对象。

<a:radio name="state" bindTarget="sys_user_create_ds" layout="vertical"
style="padding-top:5px;padding-bottom:5px;" width="80">
    <a:items>
        <a:item label="SYS_USER.PASSWD_EXPIRED_DAYS" value="1"/>
        <a:item label="SYS_USER.PASSWD_EXPIRED_TIMES" value="2"/>
        <a:item label="SYS_USER.PASSWD_EXPIRED_NEVER" value="3"/>
    </a:items>
    <a:events>
        <a:event name="change" handler="onRadioChange"/>
    </a:events>
</a:radio>

radio标签可以设置一个id属性,id是组件的唯一标识,我们可以在页面脚本中用$('id')的方法获得该id对应的组件对象,进而可以调用相应的函数方法。

radio标签的bindTarget属性可指定一个dataset对象的id,name属性可指定该dataset其中一个field的名字。这两个属性必须联合使用,其功能是将Radio对象绑定到dataset中的一个field上,进而我们只要对dataset进行操作就能即时反映在Radio上,另外Radio上的文字编辑也会立刻修改dataset中的数据。

items标签定义了radio的选项组。items标签下每个item标签即一个选项,label属性指定选项后面的提示性息,value属性指定了选项的值。

events标签定义了需要响应的事件函数,例如change事件,当选中的选项改变为选中另一个选项时,Radio会触发change事件,这样我们可以通过配置一个客户端函数onRadioChange来响应。

function onRadioChange(radio, newValue, oldValue){
    var record = $('sys_user_create_ds').getCurrentRecord();  
    if(newValue=='1'){
        record.set('password_lifespan_access',null)
        record.getMeta().getField('password_lifespan_days').setReadOnly(false);
        record.getMeta().getField('password_lifespan_access').setReadOnly(true);
    }else if(newValue=='2'){
        record.set('password_lifespan_days',null)
        record.getMeta().getField('password_lifespan_days').setReadOnly(true);
        record.getMeta().getField('password_lifespan_access').setReadOnly(false);
    }else{
        record.set('password_lifespan_access',null)
        record.set('password_lifespan_days',null)
        record.getMeta().getField('password_lifespan_days').setReadOnly(true);
        record.getMeta().getField('password_lifespan_access').setReadOnly(true);
    }
}

另外,radio标签还有另一种方式来定义Radio对象,Radio的选项不是用items标签来硬性定义,而是可以用类似于combobox的方法,将选项用options属性绑定到一个dataset数据集,相应的文本提示信息和选项值用labelField和valueField来指定。

<a:radio id="roleRadios" labelExpression="${@role_description}_${@company_short_name}"
layout="vertical" options="/model/role_list" valueField="role_company" width="230">
    <a:events>
        <event name="enterdown" handler="goToMain"/>
    </a:events>
</a:radio>	

labelExpression属性指定如何选项文本提示信息的表达式,可替代labelField属性。

Radio标签属性

表 1. 

属性名 用途 默认值 是否必填
labelExpression 指定如何选项文本提示信息的表达式。
labelField 指定options绑定的选项数据集中用来显示选项文本提示信息的field。 label
layout 指定按钮组的排列方式。

取值 horizontal | vertical

horizontal
options 指定Radio选项的数据集。
valueField 指定options绑定的选项数据集中用来表示选项值的field。

Radio对象事件

表 2. 

事件名 用途
blur 失去焦点时触发的事件。
change 选中的选项改变为选中另一个选项时触发的事件。
click 点击选项按钮时触发的事件。
enterdown 敲击回车键时触发的事件。
focus 获得焦点时触发的事件。
keydown 键盘按下时触发的事件。
mouseover 鼠标移到组件上时触发的事件。
mouseout 鼠标移出组件时触发的事件。

Demo
  1. radio
Attachments
  1. radio.screen

Comments

0 Responses to the article

暂时没有评论。

发表评论