extjs 4 checkboxgroup Panel的简单用法

Ext.require([
             ‘Ext.tree.*‘,
             ‘Ext.data.*‘,
             ‘Ext.window.MessageBox‘,
             ‘Ext.tip.*‘
         ]);

Ext.onReady(function() {
/* new Ext.Window({
		title:"新增",
		width:500,
		height:400,
		plain:true,
		layout:"form",
		labelWidth:55,
		items:[{
			layout:"column",
			baseCls:"x-plain",
			style:"padding:5px",
			items:[{
				columnWidth:.5,
				layout:"form",
				labelWidth:50,
				baseCls:"x-plain",
				items:[{
					xtype:"textfield",
					fieldLabel:"姓名"
					},{
						xtype:"textfield",
						fieldLabel:"姓名"
					},{
					xtype:"textfield",
					fieldLabel:"姓名"
					},{
					xtype:"textfield",
					fieldLabel:"姓名"
				}]
			},{
				columnWidth:.5,
				layout:"form",
				items:[{
					id:"name",
					xtype:"textfield",
					fieldLabel:"照片",
					inputType:"image",
					width:250,
					height:50
				}]
			}]
		},{
			xtype:"textfield",
			fieldLabel:" 证号"
		}],
		buttons:[{text:"确定"},{text:"取消"}]
}).show(); */

	 Ext.create(‘Ext.panel.Panel‘,{
		title:‘panel‘,
		layout:‘column‘,
		frame:true,
		height:300,
		width:1000,
		renderTo:Ext.getBody(),
		defaults: {
	           // labelAlign: ‘top‘,
			baseCls:"x-plain",
			padding:‘5,10,5,10‘
	    },
		items:[{
			columnWidth:.2,
			frame:true,

			defaults: {
		        // labelAlign: ‘top‘,
		        labelWidth:50
		    },
			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			}]
		},{
			columnWidth:.2,
			frame:true,
			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			}]
		},{
			columnWidth:.2,
			frame:true,

			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			}]
		},{
			columnWidth:.2,
			frame:true,

			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			}]
		},{
			columnWidth:.2,
			frame:true,

			items:[{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名3"
			},{
			  	xtype:"textfield",
				fieldLabel:"姓名4"
			}]
		}]

	}); 

	 Ext.create(‘Ext.panel.Panel‘,{
			title:‘panel‘,
			layout:‘column‘,
			frame:true,
			height:300,
			width:1000,
			renderTo:Ext.getBody(),
			defaults: {
		           // labelAlign: ‘top‘,
				baseCls:"x-plain",
				padding:‘5,10,5,10‘
		    },
			items:[{
				columnWidth:.2,
				frame:true,

				defaults: {
			        // labelAlign: ‘top‘,
			        labelWidth:50,
			        height:20
			    },
				items:[{
				  	xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				},{
					xtype:"checkbox",
				  	boxLabel:"姓名3"
				}]
			},{
				columnWidth:.2,
				frame:true,
				items:[{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				}]
			},{
				columnWidth:.2,
				frame:true,

				items:[{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				}]
			},{
				columnWidth:.2,
				frame:true,

				items:[{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				}]
			},{
				columnWidth:.2,
				frame:true,

				items:[{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名3"
				},{
				  	xtype:"textfield",
					fieldLabel:"姓名4"
				}]
			}]

		}); 

	 var myPanel = Ext.create(‘Ext.form.Panel‘, {
		    title: ‘Checkbox Group‘,
		    width: 850,
		    height: 125,
		    bodyPadding: 10,
		    renderTo: Ext.getBody(),
		    items:[{
		        xtype: ‘checkboxgroup‘,
		        id:‘mygroup‘,
		        fieldLabel: ‘Two Columns‘,
		        columns: 6,
		        vertical: true,
		        items: [{
		            	vertical: false,
		            //	columnWidth:200,
		            	xtype: ‘panel‘,
		            	baseCls:"x-plain",
		            	items:[{
		            		name:"moduleck",xtype: ‘checkbox‘,boxLabel: ‘Item 1‘, name: ‘rb‘, inputValue: ‘111a‘
		            	},{
		            		name:"moduleck", xtype: ‘checkbox‘,boxLabel: ‘Item 1-2‘, name: ‘rb‘, inputValue: ‘111b‘
		            	},{
		            		name:"moduleck",xtype:"checkbox",
						  	boxLabel:"姓名3"
		            	}
		            ]},
		            { boxLabel: ‘Item 2‘, name: ‘rb‘, inputValue: ‘2‘, checked: true },
		            { boxLabel: ‘Item 3‘, name: ‘rb‘, inputValue: ‘3‘ },
		            { boxLabel: ‘Item 4‘, name: ‘rb‘, inputValue: ‘4‘ },
		            { boxLabel: ‘Item 5‘, name: ‘rb‘, inputValue: ‘5‘ },
		            { boxLabel: ‘Item 6‘, name: ‘rb‘, inputValue: ‘6‘ }
		        ]
		    }]
	 });
	 Ext.create(‘Ext.Button‘, {
		    text: ‘得到被选中的节点‘,
		    renderTo: Ext.getBody(),
		    handler: function() {
		    	var myCheckboxGroup = Ext.getCmp(‘#mygroup‘);

		    	console.info(‘---‘+myPanel.down(‘checkboxgroup‘).getId());
		    	console.info(‘---‘+myPanel.down(‘checkboxgroup‘).fieldLabel);

		    	console.info(‘---+myPanel.query("checkbox"):‘+myPanel.query("checkbox")[0].name);

		    	console.info(‘---+myPanel.query("checkbox[name=rb]")‘+myPanel.query("checkbox[name=rb]")[0].name);
		    	var cks = myPanel.query("checkbox[name=rb]");
		    	for(var i=0;i<cks.length;i++){
		    		console.info("gg:"+cks[i].inputValue+","+cks[i].getValue());
		    		cks[i].setValue(true);
		    	}
		    	console.info(‘---‘+myPanel.down(‘checkbox‘).name);
		    	console.info(‘---‘+myPanel.down(‘checkbox‘).inputValue);

		    	return;
		    	console.info( Ext.query("#mygroup").length);
		    	console.info((Ext.query("#mygroup")[0]).getXType());
		    	console.info( (Ext.query("#mygroup")[0]).getId());

		    	return;
		    	  for (var i = 0; i < myCheckboxGroup.items.length; i++)
		            {
		                if (myCheckboxGroup.items.itemAt(i).checked)
		                {
		                	console.info(Ext.isEmpty(myCheckboxGroup.items.itemAt(i).name));
		                    alert();
		                }
		            }
		    }
	   });

});

  

时间: 2024-08-30 07:17:09

extjs 4 checkboxgroup Panel的简单用法的相关文章

UpdatePanel的简单用法(转)

微软AJAX虽然是过时的玩意,但是得维护公司之前的老项目,转载看看. 局部更新是ajax技术的最基本,也是最重要的用法,今天大概把asp.net ajax中的局部更新控件 updatepanel的用法记录下,大家可以共同探讨 UpdatePanel控制页面的局部更新,这个更新功能依赖于scriptManger控件的EnablePartialRendering属性,如果这个属性设置为false局部更新会失去作用(scriptManger控件的EnablePartialRendering属性的默认值

iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segmentfault.com/blog/alan/1190000002411296 iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一.不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了! 这里就介绍一下iOS的block-based an

Android WIFI 简单用法

随着Wifi的普及,在开发App的时候对wifi的考虑越来越多了.例如程序的升级在wifi下可以省很多流量,在通信软件中的视频通话.可以实现高画质的传输等等,Android提供了WifiManager类来帮助开发者们管理Wifi.下面就简单来说一下WifiManager的简单用法把. 权限: 为了使用WfiManager 我们需要在Androidmanifest.xml 加入权限: //本例中使用了前两个.具体请按照需要添加权限. <uses-permission android:name=&quo

Android中资源文件中的字符串数组string-array简单用法

在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子如下: 把相应的数据放到values文件夹的strings.xml文件里,或是其他自定义的xml中都可以,以下操作方法相同. <?xml version="1.0" encoding="utf-8"?> <resources> <string-array name="sports"> <item>足球<

expect简单用法

1 #!/usr/expect/bin/expect -f 2 3 4 set loginuser [lrange $argv 0 0] 5 set loginpass [lrange $argv 1 1] 6 set ipaddr [lrange $argv 2 2] 7 set port [lrange $argv 3 3] 8 set timeout [lrange $argv 4 4] 9 set from [lrange $argv 5 5] 10 set to [lrange $ar

Tcpdump 的简单用法

Tcpdump 的简单用法 tcpdump是Linux命令行下使用最广泛的网络分析工具,运行的时候会将网卡运行在混杂模式下,需要root权限才能执行 下面是几个比较常见的参数: -w  保持到指定的文件 -i  指定监听的网卡,缺省显示第一块网卡 -nn 以IP方式显示host -v  显示详细信息 -s  指定数据包大小,缺省是65535 -t  不显示时间 ,缺省是显示时间戳 -c  获取数据包数量,缺省不限制,需要用Ctrl+c来终止 下面是关于命令关键字的说明 1.主要包括host,ne

C++ double转string类型以及MFC控件简单用法

这两天项目需要,测试c++库里面内容.生成jar再给Android调用.我没有学过C++,现在开始记录C++简单用法.测试时候一般都是使用mfc程序来测试,要输入值,显示结果吗.我用的编译环境vs2008. 一.double 转string #include <string> CString strResultx; strResultx.Format(_T("x:%.4f\n"), 89.7887878); 转换结果还是放在strResultx 2.两个字符串相连 CStr

vB SendMessage API 简单用法

vB SendMessage API 简单用法 1. 在Windows编程中,向文本框控件.列表控件.按钮控件等是我们最常接触的控件了.但是在VB中这些控件有时无法实现我们的需要.在这时,我们只要简单的利用Windows API函数就可以扩充这些控件的功能了.顾名思义,SendMessage函数就是向窗口(这里的窗口指的是向按钮.列表框.编辑框等具有hWnd属性的控件)发送消息的函数,该函数的定义如下:Declare Function SendMessage Lib "user32"

java中Object.equals()简单用法

/* equals()方法默认的比较两个对象的引用! */ class Child { int num; public Child(int x){ num = x; } //人文的抛出运行时异常的好处是:可以自定义错误信息! /*public boolean equals(Object o) throws ClassCastException{ if(!(o instanceof Child)) throw new ClassCastException("中文提示:类型错误"); Ch