<!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. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  2. Spring Roo

    Spring Roo 是SpringSource新的开放源码技术,该技术主要面向企业中的Java开发者,使之更富有成效和愉快的进行开发工作,而不会牺牲工程完整或灵活性.无论你是一个新的Java开发人员 ...

  3. DataTemplate 以及Template Selector 学习笔记

    1. 内容控件通过ContentTemplate,列表控件通过itemTemplate 来支持模板绑定.例子如下: 模板定义: xaml: <DataTemplate x:Key="R ...

  4. Notes of the scrum meeting(11/2)

    meeting time:13:00~13:30p.m.,November 2nd,2013 meeting place:3号公寓楼一层 attendees: 顾育豪                  ...

  5. 从C中变化过来的各种语言的printf输出格式

    在c.php和shell中经常可以碰到printf的使用,特别是在php中printf的相关变种有好几个:print.printf.sprintf.vprintf.vsprintf     在这些语言 ...

  6. 【Count and Say】cpp

    题目: The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111 ...

  7. 用PHP对数据库内容进行操作（改）

    查询页面(用户可见) <body> <table width="80%" border="1" cellpadding="0&quo ...

  8. 【BZOJ】【1798】【AHOI2009】Seq维护序列

    线段树 属于线段树中级应用吧…… 要打两种标记:乘法和加法标记.一开始我想着可以像只有加法标记那样,永不下传,查询的时候依次累加就好了.后来发现不会写……只好每次update的时候……遇到标记!下传! ...

  9. CSS3 3D变换

    可以这么说,3D变换是基于三维坐标系的.以下是“盗用”的图 CSS3中的3D变换主要包括以下几个功能函数: 3D位移:包括translateZ()和translate3d(): 3D旋转:包括rota ...

  10. web项目首页提示404

    我也是服了,估计是项目有问题,只能找jsp,找不到html和htm.把list中多余的都删掉,只保留index.jsp <welcome-file-list> <welcome-fi ...