<!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. iOS-添加测试设备Identifier

    第一步:确认你的设备已经连接 第二步:点击xcode上"Windows"标签,选择"Devices" 第三步:在弹出的左框选择你要添加的设备.在右边框里可以找到 ...

  2. WebApi接口访问频率控制的实现

    关于限流的文章,博客园内还是有挺多的.本文做了一个基于Filter限流的例子,算是对WebApiThrottle使用的一个具体的实例. 实现方法: 1.使用Nuget,对WebAPI项目添加WebAp ...

  3. win8.1上安装vc6

    win8.1上安装vc6 1.以管理员方式运行SETUP.EXE,然后一路下一步 2.这里需要一点点耐心,等10分钟左右就能过去,电脑会比较卡,有点像假死,还是没有死掉,等等就好了 3.这里选择vc6 ...

  4. C# 字符串详细使用

    转自 http://www.cnblogs.com/candywyq/archive/2007/07/24/830021.html 1.Convert.ToInt32与Int32.Parse的恩恩怨怨 ...

  5. MYSQL与 R

    1. 配置MySQL ODBC必须先安装MySQL ODBC driver下载地址可以为:http://www.mysql.com/downloads/connector/odbc/ 2. 控制面板\ ...

  6. ASP.NET Web API 实例

    ASP.NET Web API 入门大杂烩 创建Web API解决方案,命名为VCoinWebApi,并且创建了同名的Project,然后,创建一个Empty Project:Models,创建一个W ...

  7. 有关ZxMiddleTier构想

    终于决定动手写一个自己的东西,没有其它想法,人已经30多了,感觉原来学的东西都是零散的,想通过这样一个中间层的项目,串联起原来所学的东西,形成一个体系,也算是对自己这么多年的程序员的生涯做出一个交代, ...

  8. Function-两个日期大小比较

    function checkDate(from,to){ if (from == "" || to == "") return 2; var rValue = ...

  9. C++异常机制知识点

     在这里总结一下,C++中的异常机制,以及如何使用异常的知识点 C++中处理异常的过程是这样的:在执行程序发生异常,可以不在本函数中处理,而是抛出一个错误信息,把它传递给上一级的函数来解决,上一级解决 ...

  10. P1297: [SCOI2009]迷路

    首先知道,如果没有路径长度的要求,且给定的邻接矩阵只有0和1表示通与不通的话,从S->E走N次的方案数就是这个矩阵自乘N次后的(S,E)的数值.这样的话只需要快速幂+矩阵乘法即可过关. (转载请 ...