<!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. windows phone版的一个儿教app

    昨天下午看见一个园友写的一篇关于儿教的api,看了也就两三个接口,所以数据处理应该不会太复杂,主要是界面的效果,要求可能比较高.于是我就重新自己写了一个app,实现很简单,花的时间比较多的地方应该是在 ...

  2. 分享C#原生ID（流水号）生成功能实现

    ///, , )).TotalMilliseconds.ToString(")); /// <summary>         ///         /// </summ ...

  3. ALTERA MAX10官方评估板，新鲜出炉！

    刚刚拿到骏龙提供的ALTERA MAX10官方评估板,还热乎呢,呵呵!赶紧跟大家分享一下 板子很简单,把IO口都扩展出来了,其他功能基本上没有. FPGA型号是10M08SAE144C8GES,144 ...

  4. urllib3 PoolManager

    A pool manager is an abstraction for a collection of ConnectionPools.If you need to make requests to ...

  5. DataGridView控件

    DataGridView控件 DataGridView是用于Windows Froms 2.0的新网格控件.它可以取代先前版本中DataGrid控件,它易于使用并高度可定制,支持很多我们的用户需要的特 ...

  6. Daily Scrum6

    今天我们小组开会内容分为以下部分: part 1: Anti-spam and anti-abuse module模块总结: part 2: 部分优化代码的展示于交流: part 3:针对用户积分模块 ...

  7. Linux 下的类似Windows下Everything的搜索工具

    Windows NTFS有个超级快的搜索工具Everything,非常好用,Linux下有几个类似的命令行工具,太难用了,推荐一个catfish,类似Everything,有GUI,可以自定义一个快捷 ...

  8. ListView单击单元格 产生其他控件

    以combobox为例. 假如一行里面只有一个combobox. //在类中声明一个控件数组 private ComboBox[] cmds = null; //initview中调用dao组件获得显 ...

  9. LNMP系列网站零基础开发记录（二）

    [目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...

  10. Careercup - Google面试题 - 5680330589601792

    2014-05-08 23:18 题目链接 原题: If you have data coming in rapid succession what is the best way of dealin ...