<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

    <script type="text/javascript">
            Ext.onReady(function() {
                Ext.QuickTips.init();
                Ext.create('Ext.form.Panel', {
                    title: 'Ext.form.FieldSet.Sample',
                    labelWidth: 40,
                    width: 220,
                    frame: true,
                    renderTo: 'form',
                    bodyPadding: 5,
                    items: [{
                        title: 'ProductInfo',
                        xtype: 'fieldset',
                        collapsible: true,
                        bodyPadding: 5,
                        defaults: {
                            labelSeparator: ': ',
                            labelWidth: 50,
                            width: 160
                            },
                        defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'Site'
                        },{
                            fieldLabel: 'Price'
                        }]
                    },{
                        title: 'ProductDesc',
                        xtype: 'fieldset',
                        bodyPadding: 5,
                        checkboxToggle: true,
                        checkboxName: 'description',
                        labelSeparator: ': ',
                        items: [{
                            fieldLabel: 'Info',
                            labelSeparator: ':',
                            labelWidth: 50,
                            width: 160,
                            xtype: 'textarea'
                        }]
                    }]
                });

                Ext.create('Ext.form.FormPanel', {
                    title: 'Ext.form.FieldContainer.Sample',
                    width: 600,
                    frame: true,
                    renderTo: 'form1',
                    bodyPadding: 5,
                    fieldDefaults: {
                        labelSeparator: ': ',
                        labelWidth: 160,
                        width: 360,
                        msgTarget: 'side'
                    },
                    defaultType: 'textfield',
                    items: [{
                        fieldLabel: 'ProductName'
                    },{
                        xtype: 'fieldcontainer',
                        fieldLabel: 'ProductDate',
                        layout: {
                            type: 'hbox',
                            align: 'middle'
                        },
                        combineErrors: true,
                        fieldDefaults: {
                            hideLabel: true,
                            allowBlank: false
                        },
                        defaultType: 'textfield',
                        items: [{
                            fieldLabel: 'Year',
                            flex: 1,
                            inputId: 'yearId'
                        },{
                            xtype: 'label',
                            forId: 'yearId',
                            text: 'Year'
                        },{
                            fieldLabel: 'Month',
                            flex: 1,
                            inputId: 'monthId'
                        },{
                            xtype: 'label',
                            forId: 'monthId',
                            text: 'Month'
                        },{
                            fieldLabel: 'Day',
                            flex: 1,
                            inputId: 'dayId'
                        },{
                            xtype: 'label',
                            forId: 'dayId',
                            text: 'Day'
                        }]
                    },{
                        fieldLabel: 'SiteSource'
                    }]
                });
            });
    </script>
</head>
<body>
    <div id='form'></div>
        <div id='form1'></div>

</body>
</html>

ExtJs之FieldSet和FieldContainer的更多相关文章

  1. 跟我一起学extjs5(22--模块Form的自己定义的设计)

    跟我一起学extjs5(22--模块Form的自己定义的设计)         前面几节完毕了模块Grid的自己定义,模块Form自己定义的过程和Grid的过程类似,可是要更复杂一些.先来设计一下要完 ...

  2. 21、手把手教你Extjs5（二十一）模块Form的自定义的设计

    前面几节完成了模块Grid的自定义,模块Form自定义的过程和Grid的过程类似,但是要更复杂一些.先来设计一下要完成的总体目标. 1､可以有多个Form方案,对应于显示.新增.修改.审核.审批等功能 ...

  3. ExtJs之字段集FieldSet

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

  4. EXTJS 4.2 资料 控件之 xtype: "fieldcontainer",追加html

    { xtype: "fieldcontainer", layout: "hbox", items: [ { fieldLabel: '素材目录', name: ...

  5. ExtJS扩展：扩展grid

    ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所 ...

  6. Extjs 源码组成（4.0.7）

    (function(){})()形式的自执行,构建Ext对象(0~584) 1  设置全局对象EXt:global.Ext = {}, 2 实现了Ext对象面向对象编程的基础方法,如,apply,ex ...

  7. 扩展ExtJs 4.2.1 htmleditor 添加图片功能

    做项目的时候遇到这样一个问题,因为我是用ExtJs做的后台管理框架,所以当我使用ExtJs htmleditor 控件 的时候,发现没有图片上传的功能,于是我打算在网上找找有关的文章,居然真有人写过, ...

  8. Extjs学习笔记--（一vs增加extjs智能感知）

    1,编写class.js var classList=[ "Ext.layout.container.Absolute", "Ext.layout.container.A ...

  9. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

随机推荐

  1. UIBezierPath 的使用介绍

         使用UIBezierPath类可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个封装.使用此类可以定义简单的形状,如椭圆或者矩形,或者有多个直线和曲线段组成的形状 ...

  2. CentOS 6.3 安装以及配置Apache php mysql

    准备篇: 1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables -A INPUT -m state –state NEW -m tcp -p tcp –dp ...

  3. 失败的数据库迁移UDB

    公司采用的是ucloud的云主机,数据库也是架设在云主机上.由于数据越来越多数据查询数据越来越慢,所以我决定往 UDB上迁移.当时考虑的理由如下: (1)云主机底层架设在虚拟机上IO性能有折损,而UD ...

  4. 【转载】如何在FPGA设计环境中添加加时序约束

    转自:http://bbs.ednchina.com/BLOG_ARTICLE_198929.HTM 如何在FPGA设计环境中加时序约束    在给FPGA做逻辑综合和布局布线时,需要在工具中设定时序 ...

  5. Linux C 文件与目录3 文件读写

    文件读写 文件读写是指从文件中读出信息或将信息写入到文件中.Linux文件读取可使用read函数来实现的,文件写入可使用write函数来实现.在进行文件写入的操作时,只是在文件的缓冲区中操作,可能没有 ...

  6. github -- fork提交项目

    我们在进行Github协同开发的时候,往往会去fork一个仓库到自己的Github中,过一段时间以后,原仓库可能会有各种提交以及修改,很可惜,Github本身并没有自动进行同步的机制,这个需要我们手动 ...

  7. 1、android orm之greendao

    前提:最近写android项目,android自带数据库api有点复杂,于是偷懒用了greendao.greendao好处自己查,这里不赘述,但是零基础的的我用起来还是费了3天的功夫,取之于网络,特在 ...

  8. openfire插件开发之完美开发

    http://redhacker.iteye.com/blog/1919329 一.说在前面 在继上篇Openfire3.8.2在eclipse中Debug方式启动最简单的方式后,我研究了openfi ...

  9. 1564: [NOI2009]二叉查找树 - BZOJ

    Description Input Output只有一个数字,即你所能得到的整棵树的访问代价与额外修改代价之和的最小值.Sample Input4 101 2 3 41 2 3 41 2 3 4Sam ...

  10. linux I/O

    一) I/O调度程序的总结     1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成.     2) 每个块设备都有它自己的队列.     3) I/O调度程序负责维护 ...