EXT--Ext.form.CheckboxGroup和Ext.form.RadioGroup组件示例

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Ext.form checkBoxGroup 和 ReadioGroup组件示例</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> 
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
        
<script type="text/javascript"> 
         Ext.onReady(function(){ 
     new Ext.form.FormPanel({ 
title:'checkBoxGroup and ReadioGroup', 
bodyStyle:'padding:5 5 5',//表单边距 
frame:true, 
height:100, 
width:270, 
renderTo:'form', 
defaults:{ 
labelSeparator:':', 
labelWidth:50,//标签宽度 
width:200, //字段宽度 
labelAlign:'left' 
}, 
items:[ { 
xtype:'radiogroup', 
fieldLabel:'性别', 
columns:2, 
items:[{boxLabel:'男',name:'sex',inputValue:'male'}, 
  {boxLabel:'女',name:'sex',inputValue:'female'}] 
}, 
     { 
xtype:'checkboxgroup', 
fieldLabel:'爱好', 
columns:3, 
items:[{boxLabel:'游泳',name:'swim'}, 
{boxLabel:'唱歌',name:'sing'}, 
{boxLabel:'游戏',name:'game'}] 
} 
] 
}); 
        }); 
</script>        
    </head> 
    <body> 
    <div id="form"></div> 
    </body> 
</html> 

 

开发者博客www.developsearch.com

你可能感兴趣的:(checkbox)