//Ext.form.FieldSet扩展自Ext.container.Container。其优点就是把相同字段集中在一起,在外面字段外面加了个线”围住“他们。

       // Ext.QuickTips.init();//使表单结构清晰。

        var f_Pannel = Ext.create('Ext.form.Panel', {

            title: '字段集实例',

            renderTo: Ext.getBody(),

            frame: true,

            width: 400,

            height: 300,

            items: [{

                xtype: 'fieldset',

                title: '产品信息',

                defaults: {

                    labelWidth: 80,

                    labelAlign: 'left',

                    width: '300',

                           },

                collapsible: true,

                bodyPadding: 5,

                defaultType: 'textfield',

                items: [

                    { fieldLabel: '产地' },

                { fieldLabel: '售价' }

                ]

            },

                {

                    xtype: 'fieldset',//不是字段对象,labelWidth不会起作用,fieldLabel也不会有作用。

                    title: '产品描述',

                    checkboxToggle:true,//是否显示字段集的复选框,默认为false

                    items: [

                    {

                        xtype: 'textarea', fieldLabel: '简介', labelWidth: 30,

                        width: 200,

                    }//labelWidth必须是放到items中的field(字段)对象中才能使用,因为这些是只有字段对象才拥有的配置项也可以在defaults

                    ]//中定义

                }

            ]

        });

ExtJs之字段集FieldSet的更多相关文章

  1. Bootstrap历练实例:表单控件状态(禁用的字段集fieldset)

    禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html>& ...

  2. ExtJs 第二章,Ext.form.Basic表单操作

    1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...

  3. Ext Js详解指南

    什么是Ext JS 走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript.HTML和CSS开发而成,无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果. 个人总结Ext ...

  4. Bootstrap4总结

    一. bootstrap简介 Bootstrap,来自 Twitter(全国最大的微博),是目前最受欢迎的前端框架. bootstrap下载及演示 http://v3.bootcss.com 什么是b ...

  5. bootstrap学习笔记--bootstrap组件

    前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...

  6. Bootstrap CSS 表单

    表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的,个别的表单控件自动接收一些全局样式.下面列 ...

  7. Bootstrap<基础六> 表单

    Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...

  8. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  9. 【原创】bootstrap框架的学习 第八课 -[bootstrap表单]

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 吹着表单或基本表单 向父 <form> 元素添加 role="form". 把标签 ...

随机推荐

  1. 14.python中的集合

    什么是集合?正如其字面的意思,一堆东西集中合并到一起.乍一听貌似和容器没什么差别,嗯,好吧,集合也算是一种容器. 在学习这个容器有什么不同之前,先看看集合是如何创建的: a = set() #可变集合 ...

  2. DB2测试存储过程的原子性

    存储过程在运行过程中需要对其做异常处理.原子性等测试 下面是一个原子性测试案例 ===================================== 代码区域 ================= ...

  3. Mybatis 的日志管理

    Mybatis通过日志工厂提供日志信息,Mybatis内置的日志模版是log4j,commons.log,jdk log也可以通过slf4j简单日志模版结合log4j使用日志信息输出.具体选择哪个日志 ...

  4. hdu 1277 全文检索

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=1277 全文检索 Description 我们大家经常用google检索信息,但是检索信息的程序是很困难 ...

  5. poj 1338 Ugly Numbers

    原题链接:http://poj.org/problem?id=1338 优先队列的应用,如下: #include<cstdio> #include<cstdlib> #incl ...

  6. android开发系列之socket编程

    上周在项目遇到一个接口需求就是通讯系列必须是socket,所以在这篇博客里面我想谈谈自己在socket编程的时候遇到的一些问题. 其实在android里面实现一个socket通讯是非常简单的,我们只需 ...

  7. Android中使用WebView, WebChromeClient和WebViewClient加载网页

    在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持, 其中webView的一系列用法,比如 webView.getSettings().s ...

  8. ios中怎么处理键盘挡住输入框

    //此前要遵循UITextFieldDelegate代理.并且设置该文本框为当前控制器的代理 //开始编辑的时候让整个view的高度网上移动 - (void)textFieldDidBeginEdit ...

  9. Swift Explore - 关于 Swift 中的 isEqual 的一点探索

    在我们进行 App 开发的时候,经常会用到的一个操作就是判断两个对象是否相等.比如两个字符串是否相等.而所谓的 相等 有着两层含义.一个是值相等,还有一个是引用相等.如果熟悉 Objective-C ...

  10. mvc4 http错误403.14 forbidden

    1. 检查服务器上是否安装了“HTTP重定向”功能和“静态内容压缩”功能(在添加/删除程序或增加角色处安装). 2. 应用程序池要被配置为“集成” 3. 把.net 4.0安装在iis上 4. 确保自 ...