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

EXT--Ext.form.FieldSet

    博客分类:
  • EXT
 
阅读更多

开发者博客www.developsearch.com

 

 

Ext.form.FieldSet 扩展自Ext.container.Container组件,是一个标准的字段容器,默认布局为‘anchor’ ,也可以指定为其他布局。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>字段集</title> 
<link rel="stylesheet" href="ext-4.2.1/resources/css/ext-all.css" /> 
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script> 
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
Ext.create('Ext.form.Panel', 
{ 
  title:'Ext.form.FieldSet示例', 
  labelWidth:40, 
  width:200, 
  frame:true, 
  renderTo:Ext.getBody(), 
  bodyPadding:5, 
  items:[{ 
   title:'产品信息', 
   xtype:'fieldset', 
   collapsible:true,//显示切换展开收缩状态的切换按钮   collapsible用来设置字段集是否可以折叠 
   bodyPadding:5, 
   defaults:{ 
    labelSeparator:':', 
    labelWidth:50, 
    width:160 
    }, 
    defaultType:'textfield', 
    items:[{ 
     fieldLabel:'产地' 
     }, 
     { 
      fieldLabel:'售价' 
      }] 
        }, 
     { 
      title:'产品描述', 
      xtype:'fieldset', 
      bodyPadding:5, 
      checkboxToggle:true,//显示切换展开收缩状态的复选框 
//( checkboxToggle 设置是否显示字段集的checkbox选择框,可以实现隐藏或显示字段集的功能) 
      checkboxName:'description', //提交数据时复选框对应的name 
      labelSeparator:':', 
      items:[{ 
        fieldLabel:'简介', 
        labelSeparator:':', 
        labelWidth:50, 
        width:160, 
        xtype:'textarea' 
       }] 
     } 
     ] 
  } 
); 
}); 
</script> 
</head> 

<body> 
</body> 
</html> 

 

开发者博客www.developsearch.com

分享到:
评论

相关推荐

    EXT.form组件

    6. `fieldset`:`Ext.form.FieldSet`是用于组织和分组表单字段的容器,通常包含一个标题和可选的边框。 7. `hidden`:`Ext.form.Hidden`是隐藏字段,用于存储不显示在表单界面中的数据。 8. `htmleditor`:`Ext....

    Ext.form.FieldSet的用法.pdf

    `Ext.form.FieldSet` 是 `ExtJS` 框架中的一个组件,它主要用于组织和分组表单中的字段。FieldSet 提供了一种在界面上以可折叠或展开的方式展示一组相关输入字段的方式,有助于增强用户体验和界面的可读性。以下是对...

    Ext.form.FieldSet的用法.docx

    Ext.form.FieldSet是Ext JS库中的一个组件,用于组织和分组表单字段。它提供了一种方便的方式来呈现和管理一组相关的输入控件,并且可以通过配置项进行自定义以适应不同的设计需求。以下是对FieldSet的一些关键配置...

    Extjs fieldset两行两列布局

    var setsc = new Ext.form.FieldSet({ title: 'fieldset', // 设置FieldSet的标题 height: 80, // 设置FieldSet的高度 layout: 'form', // 设置FieldSet的布局方式 border: true, // 显示FieldSet的边框 items:...

    ExtJS-3.4.0系列目录

    - `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **面板及布局** - **面板(Panel)**:作为内容容器,可以包含其他组件。面板支持多种布局方式。 - **布局类**: - `Auto`:自动布局,根据内容...

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    ExtJs组件类的对应表

    7. **`fieldset`** - `Ext.form.FieldSet`,表单字段组,用于将一组相关的表单字段组合在一起。 8. **`hidden`** - `Ext.form.Hidden`,表单隐藏域,用于存储需要但不需要显示的信息。 9. **`htmleditor`** - `...

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

    **2.21 Field Set (Ext.form.FieldSet)** - **xtype**: `fieldset` - **功能描述**:Field Set 是一个包含一组相关字段的容器。 - **主要用途**:用于将相关的表单字段组织在一起。 **2.22 Hidden (Ext.form....

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.19 Ext.form.FieldSet字段集 4.1.20 Ext.form.FieldContainer容器字段 4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证(VType) 4.2.3 自定义VType验证 ...

    一个简单的Ext.Window中插入图片的例子

    在`Ext.Window`中添加内容通常通过设置其`items`配置项来完成,可以是任何Ext JS支持的组件,如`Ext.Panel`、`Ext.form.FieldSet`或直接的HTML元素。 插入图片主要涉及以下步骤: 1. **创建图片对象**:在...

    解决EXT.NET在IE9下中文太小Default.css

    6. `.x-fieldset legend`:字段集标题的字体大小,对于组织表单内容很重要。 7. `.x-btn` 和 `.x-btn button`:按钮上的文字大小,确保点击目标清晰。 8. `.x-grid3-hd-row td, .x-grid3-row td, .x-grid3-summary-...

    EXT制作的FORM,可以与Servlet进行交互

    EXT form通常由`Ext.form.Panel`或者`Ext.form.FieldSet`构建,其中包含各种字段如文本框、复选框、下拉框等。每个字段都有自己的配置选项,如`fieldLabel`(字段标签)、`name`(标识符)等。通过这些配置,我们...

    EXT4.3实现动态表单全动态

    通过`Ext.form.FieldSet`和`Ext.container.Container`等类,开发者可以构建复杂的动态表单结构。 - **动态生成**:开发者可以通过编程方式动态生成表单元素,例如使用`Ext.Component`或`Ext.form.field.Base`的子类...

    EXT2.0中文教程

    4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2. 把select变成comboBox。 4.4.3. ...

    Ext 动态加载表单数据

    4. **Ext.form.FieldSet**:如果表单数据复杂,可以使用FieldSet来组织字段,FieldSet是一个可折叠的容器,可以包含多个字段。 5. **Ext.data.Store**:Store是用来存储数据的容器,它可以与表单联动。在动态加载...

    Extjs实用教程

    - **FieldSet**: `Ext.form.FieldSet`,表单字段组。 - **Hidden**: `Ext.form.Hidden`,隐藏字段。 - **HtmlEditor**: `Ext.form.HtmlEditor`,HTML编辑器。 - **NumberField**: `Ext.form.NumberField`,数字...

    EXT3.2 多选下拉框

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

    ext 2.0 form demo

    EXT 2.0 Form Demo 知识点详解 EXT是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...

Global site tag (gtag.js) - Google Analytics