`
y1d2y3xyz
  • 浏览: 256653 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext表单组件之checkbox

阅读更多

这个组件都比较简单,要配置的参数很少
radio和checkbox设置基本一样,就几个属性(checked,handler,boxLabel,inputValue),俩个的配置一样的可以比较着进行学习,checkboxgroup和radiogroup设置也是完全一样的,他们的属性主要包括:columns和vertical
运行代码就知道有多么容易了
checkbox.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>register.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-cb{width: 700px;margin-left: auto;margin-right: auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="checkbox.js"></script>
	</head>
	<body>
			<div id="form-cb"></div>
	</body>
</html>


checkbox.js
Ext.onReady(function() {
			var form = new Ext.FormPanel({
						title : 'checkbox应用',
						width : 600,
						autoHeight : true,
						renderTo : 'form-cb',
						bodyStyle : "padding:2px",
						border : false,
						frame : true,
						items : [{
								autoHeight : true,
								xtype : 'fieldset',
								collapsible :true,
								collapsed :true,
								layout : 'form',
								title:'复选框',
								items:[{
									xtype : 'checkbox',
									fieldLabel : '复选框',
									inputValue : '1',//选中值
									checked :true,//是否被选中
									handler :function(){Ext.Msg.alert('提示','你被选中了')},
									name : 'b1',
									boxLabel : 'box1'
								},{
									xtype : 'checkboxgroup',
									fieldLabel : '复选组autolayout',
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'gb'
									},{
										inputValue : 'dance',
										boxLabel : '跳舞',
										checked :true,//是否被选中
										name : 'gb'
									},{
										inputValue : 'swing',
										boxLabel : '游泳',
										name : 'gb'
									}]
								},{
									xtype : 'checkboxgroup',
									fieldLabel : '复选组单列layout',
									columns: 1,//设置显示的列数
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'gb1'
									},{
										inputValue : 'dance',
										boxLabel : '跳舞',
										name : 'gb1'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'gb1'
									}]
								},{
									xtype : 'checkboxgroup',
									fieldLabel : '复选组多列layout',
									columns: 2,//设置显示的列数
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'gb2'
									},{
										inputValue : 'dance',
										checked :true,//是否被选中
										boxLabel : '跳舞',
										name : 'gb2'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'gb2'
									},{
										inputValue : 'play',
										boxLabel : '打球',
										name : 'gb2'
									},{
										inputValue : 'film',
										checked :true,//是否被选中
										boxLabel : '看电影',
										name : 'gb2'
									}]
								},{
									xtype : 'checkboxgroup',
									fieldLabel : '复选组多列layout(vertical=true)',
									columns: 2,//设置显示的列数
									vertical :true,//表示组件分布方向是否为垂直方向,默认为false即水平方向
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'gb3'
									},{
										inputValue : 'dance',
										checked :true,//是否被选中
										boxLabel : '跳舞',
										name : 'gb3'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'gb3'
									},{
										inputValue : 'play',
										boxLabel : '打球',
										name : 'gb3'
									},{
										inputValue : 'film',
										checked :true,//是否被选中
										boxLabel : '看电影',
										name : 'gb3'
									}]
								}]
						},{
								autoHeight : true,
								xtype : 'fieldset',
								collapsible :true,
								collapsed :false,
								title:'单选框',
								layout : 'form',
								items:[{
									xtype : 'radio',
									fieldLabel : '单选框',
									inputValue : '1',//选中值
									checked :true,//是否被选中
									handler :function(){Ext.Msg.alert('提示','你被选中了')},
									name : 'b1',
									boxLabel : 'box1'
								},{
									xtype : 'radiogroup',
									fieldLabel : '单选组autolayout',
									
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'rb'
									},{
										inputValue : 'dance',
										boxLabel : '跳舞',
										checked :true,//是否被选中
										name : 'rb'
									},{
										inputValue : 'swing',
										boxLabel : '游泳',
										name : 'rb'
									}]
								},{
									xtype : 'radiogroup',
									fieldLabel : '单选组单列layout',
									columns: 1,//设置显示的列数
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'rb1'
									},{
										inputValue : 'dance',
										boxLabel : '跳舞',
										name : 'rb1'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'rb1'
									}]
								},{
									xtype : 'radiogroup',
									fieldLabel : '单选组多列layout',
									columns: 2,//设置显示的列数
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'rb2'
									},{
										inputValue : 'dance',
										checked :true,//是否被选中
										boxLabel : '跳舞',
										name : 'rb2'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'rb2'
									},{
										inputValue : 'play',
										boxLabel : '打球',
										name : 'rb2'
									},{
										inputValue : 'film',
										checked :true,//是否被选中
										boxLabel : '看电影',
										name : 'rb2'
									}]
								},{
									xtype : 'radiogroup',
									fieldLabel : '单选组多列layout(vertical=true)',
									columns: 2,//设置显示的列数
									vertical :true,//表示组件分布方向是否为垂直方向,默认为false即水平方向
									items :[{
										inputValue : 'song',
										boxLabel : '唱歌',
										name : 'rb3'
									},{
										inputValue : 'dance',
										checked :true,//是否被选中
										boxLabel : '跳舞',
										name : 'rb3'
									},{
										inputValue : 'swing',
										checked :true,//是否被选中
										boxLabel : '游泳',
										name : 'rb3'
									},{
										inputValue : 'play',
										boxLabel : '打球',
										name : 'rb3'
									},{
										inputValue : 'film',
										checked :true,//是否被选中
										boxLabel : '看电影',
										name : 'rb3'
									}]
								}]
						}],
						buttons : [{
									text : '提交',
									scope : this,
									handler : function() {
										alert(Ext.encode(form.form.getValues()));
									}
								}, {
									text : '重置'
								}]
					})
		})


源代码在下面,IE7.0和FF都没问题
  • 大小: 38.8 KB
分享到:
评论

相关推荐

    Ext组件说明 Ext组件概述

    Ext的表单组件为创建复杂的数据输入界面提供了强大的支持。 ##### 1. **Checkbox(复选框)** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox(组合框)** ComboBox组件结合了文本框和...

    Ext checkBoxGroup的用法和取值

    `Ext JS`中的`checkBoxGroup`是一个方便的组件,它允许用户在一个组内多选或单选复选框。`checkBoxGroup`常用于数据过滤、设置偏好或选择多个选项的场景。我们首先来了解如何在代码中创建一个`checkBoxGroup`。 ```...

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    EXT.form组件

    在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交...

    Ext2.0 form使用实例的例程

    Ext 2.0的表单组件提供了一整套完整的解决方案,包括各种输入字段、按钮、标签、提示信息等。下面将详细解析这些知识点: 1. **表单(FormPanel)**:这是Ext 2.0中的核心表单组件,它是一个容器,可以包含各种表单...

    EXT from培训教材

    在EXT中,`EXT.from`通常指的是一个表单组件,它允许用户输入数据并进行验证,然后可以将这些数据提交到服务器进行处理。在本文中,我们将详细探讨EXT表单的创建、字段类型以及如何添加和配置这些字段。 首先,创建...

    EXT_JS实例,官方实例

    6. **表单组件**:EXT JS提供了一系列表单组件,如文本框(TextField)、下拉列表(ComboBox)、复选框(Checkbox)、单选按钮(RadioButton)等。这些组件可以轻松创建复杂的表单并实现数据验证。 7. **Ajax通信**...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...

    Ext js Xtype

    - **Form Components**: 用于构建表单的组件,如`Ext.FormPanel`,`Ext.form.Checkbox`,`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件,如`Ext.chart.Chart`,`Ext.chart.BarChart`,`Ext....

    ext4.2学习之路

    - **FormPanel**:表单组件,用于收集和验证用户输入。 - **CheckBox**、**ComboBox**、**DateField**、**Field**、**FieldSet**:分别对应复选框、组合框、日期字段、通用字段和字段集,满足不同的表单输入需求。 ...

    ext 2.0 form demo

    二、EXT 2.0表单组件 1. FormPanel:EXT中的FormPanel是用于构建表单的基本容器,它可以包含多个表单字段和其他组件。 2. 字段组件:EXT提供了多种内置的表单字段,如TextField(文本输入)、ComboBox(下拉框)、...

    Ext中xtype和vtype.

    * form:一个表单组件,用于容纳其他组件。 * checkbox:一个复选框组件,用于选择某些选项。 * combo:一个组合框组件,用于选择某些选项。 * datefield:一个日期选择器组件,用于选择日期。 * field:一个基本的...

    ExtJS实现动态读写Checkboxgroup

    在给定的文件名`ext-basex.js`中,我们可以推测它可能包含了ExtJS的基础组件或扩展,可能包括CheckboxGroup的实现。通常,这些文件会定义组件的类、样式和行为。为了进一步了解如何利用`ext-basex.js`,你需要查看该...

    Ext 3.0 中文文档.zip

    四、Grid:Grid是Ext最常用的组件之一,用于展示表格数据。它可以处理大量的数据,支持行选择、排序、分页、列调整等功能。Grid的灵活性在于可以通过配置定义列的类型和行为,如使用模板渲染单元格内容,或者添加...

    ExtJs组件类的对应表

    1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **`combo`** - `Ext.form....

    EXT教程EXT用大量的实例演示Ext实例

    Ext表单和输入控件 Ext的表单(Form)和输入控件(例如ComboBox)功能强大,支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据,并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则...

    EXT3.2 多选下拉框

    多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现,但在EXT3.2中,实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...

    ext学习之路

    #### 表单组件 - **FormPanel**:表单容器,管理表单的布局与验证。 - **CheckBox**:复选框组件,用于多项选择。 - **ComboBox**:下拉组合框,提供数据选择与输入的结合。 - **DateField**:日期输入字段,内置...

Global site tag (gtag.js) - Google Analytics