Ext 复杂Form布局 -优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_19819/article/details/81798845
本文介绍了一个使用ExtJS框架实现的表单示例，包括不同类型的输入字段和复杂的HTML编辑器组件。通过该示例可以了解如何设置字段验证及提示，并展示了如何在表单中整合HTML编辑器。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"/>
  <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../../ext-all.js"></script>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
       /**//*
        *   msgTarget的几种配置    
        *    qtip         当光标停留在域上时显示一个快速提示
            title        显示一个默认的浏览标题属性弹出
            under        增加一个空div在域下面并显示错误信息
            side         增加一个错误图标在域右边,鼠标悬停时显示错误信息
       */
        Ext.onReady(function()
        {
            //初始化快速提示
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'qtip';

            var bd = Ext.getBody();

            bd.createChild({
                tag : 'h3',
                html: 'Form中的复杂编辑器'
            });

            var form = new Ext.FormPanel({

                labelAlign : 'top',
                title : 'Inner Tabs',
                bodyStyle : 'padding : 5px',
                width : 600,
                frame : true,
                onSubmit: Ext.emptyFn,
                submit: function() {
                    this.getForm().getEl().dom.submit();
                },

                items : [
                    {
                        layout : 'column',
                        border : false,
                        items : 
                        [
                            {
                                columnWidth : .5,
                                layout : 'form',
                                border : false,
                                items:[{
                                    xtype : 'textfield',
                                    allowBlank : false,
                                    blankText : '名字不能为空',
                                    fieldLabel : '名',
                                    name : 'first',
                                    anchor : '95%' //上级容器宽度的百分比,即此控件的宽度
                                },
                                {
                                    xtype : 'textfield',
                                    minLength : 3,
                                    maxLength : 5,
                                    minLengthText : '公司长度不能小于3',
                                    maxLengthText : '公司长度不能大于5',
                                    fieldLabel : '公司',
                                    name : 'company',
                                    anchor : '95%'
                                }]
                            }
                        ]
                    },
                    {
                        columnWidth : .5,
                        layout : 'form',
                        border : false,
                        items : [
                        {
                            xtype : 'textfield',
                            fieldLabel : '地址',
                            maxLength : 50,
                            maxLengthText : '地址长度不能超过50个字符',
                            name : 'address',
                            anchor : '95%'
                        },
                        {
                            xtype : 'textfield',
                            fieldLabel : '邮箱',
                            name : 'email',
                            vtype : 'email',
                            vtypeText : '邮箱格式不正确',
                            anchor : '95%'
                        }
                        ]
                    },
                    {
                        xtype : 'tabpanel',
                        plain : true, //不用背景图片
                        activeTab : 0,
                        height : 235,
                        defaults : {bodyStyle : 'padding : 10 px'},
                        items:[
                        {
                            title : '个人信息',
                            layout : 'form',
                            defaults : {width : 230},
                            defaultType : 'textfield',

                            items : [
                            {
                                fieldLabel : '名字',
                                name : 'first',
                                allowBlank : false,
                                value : '天使'
                            },
                            {
                                fieldLabel : '编辑器',
                                name : 'editor',
                                xtype : 'htmleditor'
                            }
                            ]
                        },
                        {
                            title : '电话号码',
                            layout : 'form',
                            defaults:{width : 230},
                            defaultType : 'textfield',

                            items :[
                            {
                                fieldLabel : '宅电',
                                name : 'home',
                                value : '(888) 555-1212'
                            },
                            {
                                fieldLabel : '公司电话',
                                name : 'mobile'
                            },
                            {
                                fieldLabel : '传真',
                                name : 'fax'
                            }
                            ]
                        },
                        {
                            cls : 'x-plain',
                            title : 'Html编辑器',
                            layout : 'fit',
                            items : {
                                xtype : 'htmleditor',  //html复杂编辑器
                                id : 'bio2',
                                fieldLabel : 'Biogarphy'
                            }
                        },
                        {
                            title : '弹出式编辑器',
                            layout : 'form',
                            items: [
                            {
                                xtype : 'button',
                                text : '弹出式html编辑器',
                                handler : function()
                                {
                                    new Ext.form.HtmlEditor(
                                    {
                                        renderTo: 'editor', //Ext.getBody(),
                                        width: 300,
                                        draggable : true,
                                        height: 300,
                                        x : 200,
                                        y :200,
                                        frame: true,
                                        layout: 'fit'
                                    });
                                }
                            }
                            ]
                        }

                        ]
                    }
                ],

                buttons : [
                {
                    text : '保存',
                    handler : function()
                    {    
                        if(form.getForm().isValid())
                        {
                            form.getForm().getEl().dom.action = 'http://www.blogjava.net/supercrsky';
                            form.getForm().getEl().dom.submit();
                        }
                    }
                },
                {
                    text : '重置',
                    handler : function()
                    {
                        form.getForm().getEl().dom.reset();
                    }
                }
                ]

            });
            form.render(document.body);
        });
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
    <div id='editor'></div>
 </BODY>
</HTML>