y1d2y3xyz
- 浏览: 257047 次
- 性别:
- 来自: 深圳
-
文章分类
最新评论
-
dhunter：
mongodb 需要auth 怎么加呢？
linux下mongodb+nodejs环境搭建 -
y1d2y3xyz：
xie666 写道html.push('<td alig ...
javascript DOM操作性能-----创建DOM -
xie666：
html.push('<td align="c ...
javascript DOM操作性能-----创建DOM -
轩辕丶菓菓：
bushkarl 写道那我后台用struts2，我的name一 ...
Ext表单之loadRecord用法详解 -
heikediguo：
这样不会按照你想要的顺序加载。
加载JS文件
这个组件都比较简单，要配置的参数很少
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都没问题
分享到：
发表评论
-
Extjs源码之--Ext事件机制/继承关系
2011-10-16 16:36 1859Extjs源码之--Ext.lib.Event 中分析了EX ... -
Extjs源码之--Ext.lib.Event(事件的简单封装)
2011-10-16 11:34 2641这个对象是对事件的基础封装，在实际使用中，我们往往不从这里去 ... -
Extjs源码之--Ext.lib.Dom(Dom的基本封装)
2011-10-13 23:31 2353Extjs的对Dom最基础的封装，主要包括：元素的包含关系，元 ... -
Extjs源码之---Ext.util.DelayedTask
2011-10-12 22:56 2431/* 创建对象 var task = new Ext. ... -
Extjs源码之-- Ext.util.JSON
2011-09-23 23:19 4037很多写extjs的朋友说，Extjs的源码之间的关系太紧了，所 ... -
Ext.form.ComboBox 远程带分页显示
2011-09-23 22:00 1865很多时候针对大数据量的下拉列表的时候，我们通常需要分页显示数据 ... -
Ext.form.ComboBox change事件的BUG
2011-09-08 23:11 5390因为项目需要，想用Ext的combo控件实现动态级联，发现co ... -
Ext.grid.EditorGridPanel 中combo的显示异常
2011-09-03 00:58 2769Ext.grid.EditorGridPanel 在项目中用到 ... -
extjs源码分析-Ext.util.TaskRunner(模拟多线程)
2011-08-12 12:09 3011/** * @class Ext.util.TaskR ... -
extjs源码分析-016(Ext....)
2011-03-28 23:04 1045Ext.apply(Ext, function(){ ... -
extjs源码分析-015(Number扩展)
2011-03-20 01:03 878Ext.applyIf(Number.prototype, ... -
extjs源码分析-013(Array扩展)
2011-03-19 11:03 1116Ext.applyIf(Array.prototype, ... -
extjs源码分析-013(String扩展)
2011-03-18 23:05 1272//字符串替换 /* var cls = 'my-cl ... -
extjs源码分析-012(Funtion扩展)
2011-03-18 22:42 1289Ext.apply(Function.prototype, ... -
extjs源码分析-011(namespace)
2011-03-10 22:54 1083//命名空间,就是创建一个OBJ的一个属性, names ... -
extjs源码分析-009(Ext.urlAppend/toArray)
2011-03-10 22:43 1856//在URL后面追加参数 urlAppend : fun ... -
extjs源码分析-009(Ext.urlDecode/urlEncode)
2011-03-09 23:17 3258//把json格式转化成url的编码方式 // e.g. ... -
extjs源码分析-008(Ext.removeNode)
2011-03-09 22:35 1781DOC = document; removeNode : ... -
extjs源码分析-007(Ext.each)
2011-02-08 14:40 1613each : function(array, fn ... -
extjs源码分析-006(Ext.override/Ext.extend)
2011-02-08 00:40 2123override : function(o ...
相关推荐
Ext的表单组件为创建复杂的数据输入界面提供了强大的支持。 ##### 1. **Checkbox（复选框）** Checkbox组件允许用户选择多个选项中的一个或多个。 ##### 2. **ComboBox（组合框）** ComboBox组件结合了文本框和...
`Ext JS`中的`checkBoxGroup`是一个方便的组件，它允许用户在一个组内多选或单选复选框。`checkBoxGroup`常用于数据过滤、设置偏好或选择多个选项的场景。我们首先来了解如何在代码中创建一个`checkBoxGroup`。 ```...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**：Box Component 是一个非常基本的 Ext 组件，主要用于定义具有边框和其他布局属性的...
在EXT JS中，表单组件不仅包含基本的输入字段，还支持复杂的输入类型和验证机制。 1. `form`：`Ext.FormPanel`是EXT JS中的表单面板，它是一个容器，可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交...
Ext 2.0的表单组件提供了一整套完整的解决方案，包括各种输入字段、按钮、标签、提示信息等。下面将详细解析这些知识点： 1. **表单（FormPanel）**：这是Ext 2.0中的核心表单组件，它是一个容器，可以包含各种表单...
在EXT中，`EXT.from`通常指的是一个表单组件，它允许用户输入数据并进行验证，然后可以将这些数据提交到服务器进行处理。在本文中，我们将详细探讨EXT表单的创建、字段类型以及如何添加和配置这些字段。 首先，创建...
6. **表单组件**：EXT JS提供了一系列表单组件，如文本框（TextField）、下拉列表（ComboBox）、复选框（Checkbox）、单选按钮（RadioButton）等。这些组件可以轻松创建复杂的表单并实现数据验证。 7. **Ajax通信**...
首先，Ext.FormPanel是ExtJS中用于创建表单的主要组件，它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框，可以用来让用户选择多个选项。在示例中，...
- **Form Components**: 用于构建表单的组件，如`Ext.FormPanel`，`Ext.form.Checkbox`，`Ext.form.TextField`等。 - **Chart Components**: 提供了各种图表组件，如`Ext.chart.Chart`，`Ext.chart.BarChart`，`Ext....
- **FormPanel**：表单组件，用于收集和验证用户输入。 - **CheckBox**、**ComboBox**、**DateField**、**Field**、**FieldSet**：分别对应复选框、组合框、日期字段、通用字段和字段集，满足不同的表单输入需求。 ...
在给定的文件名`ext-basex.js`中，我们可以推测它可能包含了ExtJS的基础组件或扩展，可能包括CheckboxGroup的实现。通常，这些文件会定义组件的类、样式和行为。为了进一步了解如何利用`ext-basex.js`，你需要查看该...
二、EXT 2.0表单组件 1. FormPanel：EXT中的FormPanel是用于构建表单的基本容器，它可以包含多个表单字段和其他组件。 2. 字段组件：EXT提供了多种内置的表单字段，如TextField（文本输入）、ComboBox（下拉框）、...
* form：一个表单组件，用于容纳其他组件。 * checkbox：一个复选框组件，用于选择某些选项。 * combo：一个组合框组件，用于选择某些选项。 * datefield：一个日期选择器组件，用于选择日期。 * field：一个基本的...
四、Grid：Grid是Ext最常用的组件之一，用于展示表格数据。它可以处理大量的数据，支持行选择、排序、分页、列调整等功能。Grid的灵活性在于可以通过配置定义列的类型和行为，如使用模板渲染单元格内容，或者添加...
1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`，表单面板组件，用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`，多选框组件，用于创建多选输入。 3. **`combo`** - `Ext.form....
Ext表单和输入控件 Ext的表单（Form）和输入控件（例如ComboBox）功能强大，支持丰富的验证机制和自定义布局。用户可以通过这些控件收集用户输入的数据，并提供多种提交数据的方式。Ext JS还提供了丰富的验证规则...
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现，但在EXT3.2中，实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...
#### 表单组件 - **FormPanel**：表单容器，管理表单的布局与验证。 - **CheckBox**：复选框组件，用于多项选择。 - **ComboBox**：下拉组合框，提供数据选择与输入的结合。 - **DateField**：日期输入字段，内置...