lixue150
- 浏览: 78385 次
- 性别:
- 来自: 合肥
-
文章分类
最新评论
-
lslsday：
djggggggggggggggggggggggggggggg ...
简单的Ckeditor--实现上传的功能 -
jps7777777：
fdsgfds
Ckeditor简单的数据提交
练习fieldset的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FormPanel fieldset应用</title>
<link href="ext/resources/css/ext-all.css" type="text/css"
rel="stylesheet" />
<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="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.FormPanel({
renderTo : Ext.getBody(),
bodyStyle : 'padding:5px 5px 0',
frame : true,
width : 330,
items : [ {
xtype : 'fieldset',
title : '个人信息',
collapsible : true,
autoHeight : true,
width : 300,
defaults : {
width : 150
},
defaultType : 'textfield',//容器的默认类型
items : [ {
fieldLabel : '爱好',
name : 'hobby',
value : 'www.cnblogs.com'//字段初始化的值（默认为undefined）
}, {
xtype : 'combo',
name : 'sex',
store : [ "男", "女", "保密" ],//该组合框绑定的数据仓库（默认为undefined）
fieldLabel : '性别',
emptyText : '请选择性别。'//空字段中显示的文本（默认为null）
} ]
} ]
});
});
</script>
</head>
<body>
</body>
</html>
效果图
- 大小: 4.4 KB
分享到：
发表评论
-
Struts2.0.11+spring2+Hibernate3jar包
2011-11-04 11:54 915Struts2.0.11+spring2+Hibernate3 ... -
Ext+struts2.1.6+spring2+hibernate3的jar包
2011-11-02 11:18 995Ext+struts2.1.6+spring2+hiberna ... -
设置下拉框的初始值
2011-10-27 14:50 6509var summaryDataCombo = new Ext. ... -
Ext.grid.ColumnModel
2011-08-08 13:24 1368Ext.grid.ColumnModel 主 ... -
Ext进行查询后分页的问题
2011-08-08 10:58 1178在Ext进行查询后 分页可以出现效果，但是单击下一页或是最后一 ... -
TreePanel常用配置
2011-08-08 10:32 981TreePanel基本配置参数: //TreePane ... -
TextField
2011-08-05 11:30 2413Ext.form.TextField 配置项： ... -
FormPanel常用的属性
2011-08-05 11:30 1262Ext.form.FormPanel 配置项： ... -
ext DateField控件格式
2011-08-04 17:49 2091以下是从网上查找的一 ... -
GridPanel简单实例
2011-08-01 09:31 794<!DOCTYPE html PUBLIC " ... -
Ext.grid.GridPanel
2011-08-01 09:15 1130Ext.grid.GridPanel 主要配置项： store ... -
ExtJs FormPanel 其他组件的应用
2011-07-29 16:50 886<!DOCTYPE html PUBLIC " ... -
ExtJs FormPanel 空验证
2011-07-29 15:43 1138<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel的checkboxToggle属性效果
2011-07-29 14:49 1548<!DOCTYPE html PUBLIC " ... -
ExtJs-FormPanel学习
2011-07-29 14:17 875<!DOCTYPE html PUBLIC " ... -
ExtJs--FormPanel主要配置项
2011-07-29 13:53 1029配置项： items：一个元素或元素数组 buttons： ... -
ExtJs viewPort属性
2011-07-29 11:57 15691.xtype属性 xtype ... -
ExtJs学习--ViewPort练习
2011-07-29 11:42 5072我现在是想要熟悉ExtJs的一些属性，然后在进行相关的应用 ... -
TreePanel学习--AsyncTreeNode
2011-07-28 10:47 1512主要与TreeNode进行一些比较，看这两个新建的树的代码有什 ... -
TreePanel学习--TreeNode
2011-07-28 10:09 1658主要一个TreePanel静态树 ...
相关推荐
ExtJS是一个用于构建Web应用的强大JavaScript框架，它提供了丰富的用户界面组件和数据处理能力。其中，表单组件在Web应用中扮演着重要的角色，是收集用户输入数据的主要途径。本文将详细介绍ExtJS中常用表单组件的...
在FormPanel中，我们可以添加FieldSet来分组相关的表单元素，或者使用ColumnLayout或FitLayout等布局管理器来调整表单组件的显示方式。 数据绑定是EXT表单的一大特色，它允许表单组件与数据模型之间实时同步。这...
字段集(`fieldset`)是一种特殊的容器，用于分组相关的字段，并可以添加标题和折叠功能，如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...
4. **Ext.form.FieldSet**：如果表单数据复杂，可以使用FieldSet来组织字段，FieldSet是一个可折叠的容器，可以包含多个字段。 5. **Ext.data.Store**：Store是用来存储数据的容器，它可以与表单联动。在动态加载...
### Ext中表单中各种组件的布局 #### 平行分列布局介绍 ...同时，通过`fieldset`组件的应用，可以进一步增强表单的可读性和可用性。在实际项目开发中，根据具体的业务需求选择合适的布局方案是非常重要的。
在实现查询功能时，可以使用Ext.form.FieldSet或Ext.form.Panel创建搜索表单，包含输入框、下拉框等控件。当用户输入查询条件并提交后，Controller捕获事件，根据条件构建查询SQL，然后更新Store加载数据，从而刷新...
开发者可以通过FormPanel来构建复杂的表单，利用Field、FieldSet等组件来组织和格式化输入数据。表单的验证功能可以帮助确保用户输入的数据符合预定的规则，提高用户体验。 "grid"模块是ExtJs的另一个亮点，提供了...
2. **面板类**：如面板(Panel)、标签面板(TabPanel)、提示框(Tip)、窗口(Window)、字段集(FieldSet)、表单面板(FormPanel)、网格面板(GridPanel)和树形面板(TreePanel)，构成应用的基本界面结构。 3. **窗口**：...
多选下拉框在EXT JS中通常通过`Ext.form.CheckboxGroup`或`Ext.form.RadioGroup`类来实现，但在EXT3.2中，实现多选下拉框功能通常会使用`Ext.form.FieldSet`或`Ext.form.ComboBox`的自定义扩展。这类组件提供了复选...
1. **EXTJS组件**：EXTJS的核心是它的组件模型，包括GridPanel、TreePanel、PropertyGrid、EditorGridPanel、TabPanel、FormPanel、Panel、Window、ToolTip和FieldSet等。这些组件可以组合起来创建复杂的用户界面，...
1. FormPanel：EXT中的FormPanel是用于构建表单的基本容器，它可以包含多个表单字段和其他组件。 2. 字段组件：EXT提供了多种内置的表单字段，如TextField（文本输入）、ComboBox（下拉框）、CheckBox（复选框）、...
- **FormPanel基本应用**: - 用于创建和管理表单。 - **FieldSet**: 组合多个字段。 - **基本Field**: 如文本框、下拉框等。 - **ComboBox**: 下拉选择框。 - **DateField**: 日期选择器。 - **TimeField**: ...
- **CheckBox**、**ComboBox**、**DateField**、**Field**、**FieldSet**：分别对应复选框、组合框、日期字段、通用字段和字段集，满足不同的表单输入需求。 通过深入理解和掌握Ext JS 4.2的目录结构、核心文件和...
xtype: 'fieldset', title: '', layout: 'column', width: 880, items: [ // 表单项定义 ] } ] }); ``` - **属性解释**： - `labelAlign`: 设置标签对齐方式。 - `labelWidth`: 设置标签宽度。 - `...
- **FormPanel**：表单容器，管理表单的布局与验证。 - **CheckBox**：复选框组件，用于多项选择。 - **ComboBox**：下拉组合框，提供数据选择与输入的结合。 - **DateField**：日期输入字段，内置日期选择器。 - **...
- **表单及字段组件**：包括FormPanel、Checkbox、ComboBox、DateField、Field、FieldSet、Hidden、HtmlEditor、NumberField、Radio、TextArea、TextField和TimeField等，用于创建和管理用户输入。 EXT JS的文件...
- FieldSet：信息分类栏，用于对表单进行分组； - Button：按钮控件，用于执行某些操作； - ToolBar：工具栏，展示业务功能操作按钮； - TreePanel：树形控件，用于显示层次结构的数据； - GridPanel：表格控件，...
6. `fieldset`：`Ext.form.FieldSet`是用于组织和分组表单字段的容器，通常包含一个标题和可选的边框。 7. `hidden`：`Ext.form.Hidden`是隐藏字段，用于存储不显示在表单界面中的数据。 8. `htmleditor`：`Ext....
- `form`：`Ext.FormPanel` 或 `Ext.form.FormPanel`，用于创建表单的容器。 - `checkbox`：`Ext.form.Checkbox`，多选框组件。 - `combo`：`Ext.form.ComboBox`，下拉选择框。 - `datefield`：`Ext.form....