`
jellcy
  • 浏览: 4271 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

ext fieldSet的用例

    博客分类:
  • ext
阅读更多
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>secospace</title>
  <link rel="stylesheet" type="text/css" media="all" href="./ext/resources/css/ext-all.css" />
  </head>
  <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="./ext/ext-all.js"></script>
<body>
<div id="tab">
</div>
</div>
</body>
</html>

<script language="javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

var fs = new Ext.FormPanel({
frame: true,
autoWidth:true,
autoHeight:true,
items: [
           {
            xtype:'fieldset',
            title: '个人信息',
            collapsible: true,
            autoHeight:true,
            width:330,
            defaults: {width: 150},
            defaultType: 'textfield',
            items :[{
                    fieldLabel: '爱好',
                    name: 'hobby',
                    value: 'www.cnblogs.com'
                },{
                    xtype:"combo",
                    name: 'sex',
                    store:["男","女","保密"],//数据源为一数组
                    fieldLabel:"性别",
                    emptyText:'请选择性别.'
                }]
            }
        ],
       buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}]
    });
   
    var tp = new Ext.TabPanel({
activeTab:0,
items: [fs]
    });
   
    fs.render('tab');
   
    //注释下一行或取消下一行的注释将有不同的效果
    fs.doLayout();
});
</script>
分享到:
评论

相关推荐

    Extjs fieldset两行两列布局

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

    ExtJS的FieldSet的column列布局

    以下是自己扩展的FieldSet: 代码如下: ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { layout: ‘column’, fieldSetItems: [], autoScroll:false, defaults: { layout: ‘form’, labelAlign: ‘right’, ...

    Ext.form.FieldSet的用法.pdf

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

    Ext.form.FieldSet的用法.docx

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

    Extjs3 自定义类似于Fieldset的组件

    用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...

    EXT.form组件

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

    ext-fckeditor整合

    这通常涉及到定义一个EXT的Panel或FieldSet,并在其配置项中设置FCKeditor的初始化代码。 3. **配置FCKeditor**:FCKeditor有很多可配置的选项,如语言设置、工具栏布局、字体样式等。这些配置可以通过JavaScript...

    Ext 添加功能form表单实例

    字段集(`fieldset`)是一种特殊的容器,用于分组相关的字段,并可以添加标题和折叠功能,如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...

    EXT3.2 多选下拉框

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

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

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

    Ext 动态加载表单数据

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

    MyJsp(html的fieldset使用

    MyJsp(html的fieldset使用 MyJsp(html的fieldset使用MyJsp(html的fieldset使用MyJsp(html的fieldset使用

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

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

    HTML中fieldset

    例如,可以使用 border 属性来设置 fieldset 元素的边框样式,可以使用 padding 属性来设置 fieldset 元素的内边距,可以使用 margin 属性来设置 fieldset 元素的外边距等。 在交互方面,fieldset 元素可以使用 ...

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

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

    ext表单

    在FormPanel中,我们可以添加FieldSet来分组相关的表单元素,或者使用ColumnLayout或FitLayout等布局管理器来调整表单组件的显示方式。 数据绑定是EXT表单的一大特色,它允许表单组件与数据模型之间实时同步。这...

    jquery fieldset和legend标签代码.zip

    `&lt;fieldset&gt;` 可以看作是表单的一个区域,可以包含多个相关的输入元素,而`&lt;legend&gt;` 是 `fieldset` 的标题,它描述了该区域的主要功能。在这个"jquery fieldset和legend标签代码.zip"中,我们很可能会找到一个使用...

    Ext中xtype和vtype.

    * fieldset:一个字段集组件,用于容纳其他字段。 * hidden:一个隐藏字段组件,用于隐藏某些字段。 * htmleditor:一个 HTML 编辑器组件,用于编辑 HTML 内容。 * numberfield:一个数字字段组件,用于编辑数字。 *...

    EXT2.0中文教程

    4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天,需要往form加个图片什么的,该咋办? 4.9. 还要做文件上传哟 4.10. 非想非想,单选框多选框 4.10.1. 多选呢checkbox 4.10.2. 单选呢radio 5. 雀跃吧!超脱了一切的...

Global site tag (gtag.js) - Google Analytics