<!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. ubuntu server 14.10 安装 nodejs

    apt-get install nodejs 会报错,提示内核版本过低.如果升级,可能遇到提示boot空间不足,要求释放更多空间: sudo aptitude purge ~ilinux-image- ...

  2. 51.ISE中的DCM全局时钟转为普通IO

    在用DCM这个IP核时,它的输入时钟为全局时钟引脚输入,输出有两种情况,第一,可以直接接在全局时钟引脚:第二,可以通过ODDR2原语接在普通IO引脚:说下第二种是怎么用的: DCM DCM_INST ...

  3. 4.FPGA芯片管脚解释

    用户I/O:不用解释了.   配置管脚: MSEL[1:0] 用于选择配置模式,比如AS.PS等. DATA0 FPGA串行数据输入,连接到配置器件的串行数据输出管脚. DCLK FPGA串行时钟输出 ...

  4. Oracle把两个空格以上的空格，替换为两个空格

    substr( ,instr(,)),)) ) 解释如下: 1. 去掉原字串左右的空格的字符(STR),2.查找STR中空格出现二次的位置(LOC),3.从STR中的第一位到LOC-1截取STR||L ...

  5. Struts1+JQuery的例子

    Struts1+JQuery的例子 2014年2月10日 11:25 Struts1+JQuery+JSON/XML的例子 1.Struts+JQuery+XML struts-config.xml如 ...

  6. C++ vector介绍

    <span style="font-family: Arial; ">在此总结一下模板vector的使用介绍</span> 标准库vector类型使用需要的 ...

  7. vs2013中使用nuget下载cefsharp winform包

    cefsharp是chrome的一个开源项目,基于webkit的一个浏览器.下载cefsharp需要安装nuget.之后管理nuget程序包,联机搜索cef即可找到winform包.

  8. java笔试题(1)

    char型变量中能不能存贮一个中文汉字? char型变量是用来存储Unicode编码的字符的,unicode编码字符集中包含了汉字,所以,char型变量中当然可以存储汉字啦.不过,如果某个特殊的汉字没 ...

  9. 【每日scrum】NO.5

    尝试采用自己的地图,绘点并计算路径,但是地图打开出现问题.

  10. SVG基本图形及clipPath;

    利用SVG可以实现很多复杂的图形,SVG的功能开发者们已经开发许多,今天初识一下SVG的基本图形绘制, <svg viewbox="0,0,400,400" style=&q ...