刚刚学习ExtJS ,备注一哈代码 防止忘记。。。

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

        <link href="resources/css/ext-all.css" rel="stylesheet" />

    <script src="JS/ext-all.js"></script>

    <script src="JS/ext-lang-zh_CN.js"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            Ext.QuickTips.init();//支持Tips提示

            Ext.form.Field.prototype.megTarget = 'side';//提示的方式

            Ext.apply(Ext.form.VTypes, {

                password: function(val, field) {

                    if (field.confirmTo) {

                        var pwd = Ext.get(field.confirmTo);

                        return (val == pwd.getValue());

                    }

                    return true;

                }

            });

            var form1 = new Ext.form.FormPanel({

                width: 400,autoHeight:true,

                renderTo: "myform",

                frame: true,

                title: "用户信息",

                items: [{

                    xtype: "fieldset",

                    checkboxToggle: true,

                    checkboxName: "checkInfo",

                    title: "选填信息",

                    defaultType: "textfield",

                    width: 380,

                    autoHeight: true,

                    items: [{

                        name: "UserName",

                        id: "UserName",

                        fieldLabel: "用户名称",

                        xtype: "textfield",

                        emptyText: "请输入用户名称!",

                        anchor:"96%"

                    }, {

                        name: "UserPwd",

                        id: "UserPwd",

                        fieldLabel: "用户密码",

                        xtype: "textfield",

                        emptyText: "请输入用户密码!",

                        inputType: "password", //输入的类型

                        anchor: "96%",

                        allowBlank: false,//是否允许为空

                        blankText:"密码不能为空！"

                    },

                        {

                            fieldLabel: "确认密码",

                            id: "confirmpass",

                            name: "confirmpass",

                            inputType: "password", //输入的类型

                            vtype: "password",

                            vtypeText: "两次输入的密码不一至！",

                            confirmTo: "UserPwd",

                            anchor:"96%"

                        },

                        {

                        fieldLabel: "Emial",

                        vtype: "email",

                        vtypeText: "不是有效的邮箱地址！",

                        name:"txtEmial",

                        anchor:"96%"

                        }

                    ]

                    }

                , {

                    xtype: "fieldset",

                    collapsible: true,

                    title:"详细信息",

                    width: 380,

                    defaultType: "textfield",

                    items: [{

                        fieldLabel: "爱好",

                        name: "hbody",

                        value: '呵呵 上网',

                        anchor: "96%"

                    }, {

                        xtype: "combo",

                        name: "sex",

                        store: ["男", "女", "保密"],

                        fieldLabel: "性别",

                        anchor:"96%",

                        emptyText: "请选择姓别"

                    }]

                }

               ,

                    {

                        xtype: "fieldset",

                        title: "业务爱好",

                        width: 380,

                        labelWidth: 100,

                        labelAlign:"left",

                        autoHeight: true,

                        items: [

                            {

                                frame:true,

                                xtype: "panel",

                                layout: "column",

                                fieldLable: "爱好",

                                items: [

                                    {

                                        columnWidth: 2,

                                        xtype: "checkbox",

                                        boxLabel: "足球"

                                    },

                                    {

                                        columnWidth: 2,

                                        xtype: "checkbox",

                                        boxLabel: "篮球"

                                    },

                                      {

                                          columnWidth: 2,

                                          xtype: "checkbox",

                                          boxLabel: "乒乓球"

                                      },

                                      {

                                          columnWidth: 2,

                                          xtype: "checkbox",

                                          boxLabel: "羽毛球"

                                      }, ,

                                      {

                                          columnWidth: 2,

                                          xtype: "checkbox",

                                          boxLabel: "排球",

                                          checked:true

                                      }

                                ]

                            }

                        ]

                    }

                ],

                buttonAlign: "center",

                buttons:[{text:"确认"},{text:"取消"}]

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div id="myform">

    </div>

    </form>

</body>

</html>

Extjs.FormPanel的更多相关文章

  1. ExtJS FormPanel不执行校验

    经检查问题原因在于使用了 validator 属性. 使用validator属性,必须添加返回值.不添加返回值,就会出现FormPanel不执行校验的问题.

  2. ExtJs FormPanel布局

    FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...

  3. Javascript - 学习总目录

    Javascript - 操作符 Javascript - 数据类型 Javascrip - 语句 Javascript - 函数 Javascript - 预编译与函数词法作用域 Javascrip ...

  4. 无废话ExtJs 入门教程四[表单：FormPanel]

    无废话ExtJs 入门教程四[表单:FormPanel] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在窗体里加了个表单.如下所示代码区的第28行位置,items:form. ...

  5. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  6. 【ExtJS】FormPanel表单验证

    在Extjs中,FormPane表单提供了各种各样的验证. 在表单验证前需要在onReady的function({})内添加以下代码: Ext.QuickTips.init();    //为组件提供 ...

  7. 【ExtJS】 FormPanel与ComboBox的集成以及值的获取

    var formPanel = Ext.create("Ext.form.Panel",{ title : 'formPanel', width : 400, url : 'asd ...

  8. ExtJs 使用点滴 十三 在FormPanel 嵌入按钮

    Ext.onReady(function () { //初始化标签中的Ext:Qtip属性. Ext.QuickTips.init(); Ext.form.Field.prototype.msgTar ...

  9. ExtJs学习笔记之FormPanel组件

    FormPanel组件 FormPanel 为 form 表单提供了一个标准的容器. 本质上还是一个标准的 Ext.panel.Panel, 只是自动创建了一个 BasicForm 来管理所有添加到 ...

随机推荐

  1. node基本理念（事件、多线程、进程）

    关于node的几点理解: 1.所谓的node单线程,是指node的event loop,也就是我们的业务脚本是跑在一个单线程中的,可以理解为主线程: 2.若存在IO操作,例如文件.网络,是单独在线程里 ...

  2. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  3. 《CLR.via.C#第三版》第二部分第12章节 泛型 读书笔记(六)

    终于讲到泛型了.当初看到这个书名,最想看的就是作者对泛型,委托,反射这些概念的理解.很多人对泛型的理解停留在泛型集合上,刚开始我也是,随着项目越做越多,对待泛型的认识也越来越深刻. 泛型的概念:泛型是 ...

  4. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  5. 《Entity Framework 6 Recipes》中文翻译系列 (37) ------ 第六章 继承与建模高级应用之独立关联与外键关联

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 6-13  在基类中应用条件 问题 你想从一个已存在的模型中的实体派生一个新的实体, ...

  6. 《Node web开发》笔记

    还是因为学习kibana,才开始了解node. Node是一种基于事件驱动的异步系统,基于Chrome的引擎V8. Node中由于大量的使用模块,因此出现了很多开源模块,有点像java社区的样子. 笔 ...

  7. 基于zipkin分布式链路追踪系统预研第一篇

    本文为博主原创文章,未经博主允许不得转载. 分布式服务追踪系统起源于Google的论文“Dapper, a Large-Scale Distributed Systems Tracing Infras ...

  8. SQL Server 跨网段（跨机房）复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 解决方案(Solution) 搭建过程(Process) 注意事项(Attention) 参考 ...

  9. 【Win10 应用开发】人脸识别

    可能你会认为人脸识别用起来会很复杂,老周当初也这么想,但通过实际操作后,我发现非然. 经过微软封装的东西,向来都是复杂问题简单化,只要用得舒心,代码越少越好,用最少的代码做最多的事情,此为大师境界也. ...

  10. 希尔排序及希尔排序java代码

    原文链接:http://www.orlion.ga/193/ 由上图可看到希尔排序先约定一个间隔(图中是4),然后对0.4.8这个三个位置的数据进行插入排序,然后向右移一位对位置1.5.9进行插入排序 ...