频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Extjs4中的Form之radiogroup和checkboxgroup
2013-11-28 10:15:43           
收藏   我要投稿
Ext.onReady(function(){
	var textFomr = Ext.create("Ext.form.Panel",{
		title : "form中文本框选框的实例",
		bodyStyle :'padding:5 5 5 5',
		frame : true,
		height : 250,
		width : 400,
		id:'my_form',
		renderTo:'formDemo',
		defaults:{
			labelSeparator :": ",
			labelWidth : 50,
			width : 200,
			allowBlank: false,
			msgTarget : 'side',
			labelAlign:'left'
		},
		items:[{
			xtype:'radiogroup',//单选分组
			fieldLabel:'性别',
			columns:2,
			items:[{
					xtype:'radiofield',
					boxLabel :'男',
					inputValue:'m',
					checked:true,
					name:'sex'
				},{
					xtype:'radiofield',
					boxLabel :'女',
					inputValue:'w',
					name:'sex'
				}]
			},{
				xtype:'checkboxgroup',//多选分组
				fieldLabel:'爱好',
				width:335,
				columns:4,	//几列
			items:[{
					xtype:'checkboxfield',
					inputValue:'1',
					name:'hobby',
					boxLabel:'唱歌'
				},{
					xtype:'checkboxfield',
					inputValue:'2',
					name:'hobby',
					boxLabel:'看书'
				},{
					xtype:'checkboxfield',
					inputValue:'3',
					name:'hobby',
					checked:true,
					boxLabel:'编程'
				},{
					xtype:'checkboxfield',
					inputValue:'4',
					name:'hobby',
					boxLabel:'交友'
			}]
		}],
		dockedItems:[{
			xtype:'toolbar',
			dock:'top',
			items:[{
				text:'选择全部的爱好',
				iconCls:'table_comm',
				handler:function(){
				  	var formObj = Ext.getCmp("my_form");
				  	var basic = formObj.getForm();
				  	var fields = basic.getFields();
				  	fields.each(function(field){
				  		if("hobby" == field.getName()){
				  			field.setValue(true)
				  		}
				  	})
				}
			}]
		}],
		buttons: [
		  {text:'登陆系统',handler:function(b){
		  	var formObj = Ext.getCmp("my_form");
		  	var basic = formObj.getForm();
		  		console.log(basic.getValues());
		  }}]
	})
})




 

点击复制链接 与好友分享!回本站首页
相关TAG标签
上一篇:Extjs4中的Form之Radio和Checkbox
下一篇:Extjs中的Form之trigger
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站