`
wlxt_8436
  • 浏览: 16800 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext 表单FormPanel的简单使用

阅读更多

Ext.onReady(function(){
                Ext.QuickTips.init();
                var form = new Ext.FormPanel({
                    frame:true,
                    width:500,
                    monitorValid:true,//把有formBind:true的按钮与验证绑定
                    layout:'form',
                    labelWidth:55,
                    title:'添加个人信息',
                    labelAlign:'right',
                    renderTo:Ext.getBody(),
                    submit:function() {
                                this.getEl().dom.action = 'getForm';
                                this.getEl().dom.method = 'POST';
                                this.getEl().dom.submit();
                            },
                    items:[{
                            xtype:'panel',
                            layout:'column',  //布局格式,使items里的标签元素在同一行
                            items:[{
                                    fieldLabel:'用户名',
                                    columnWidth:.5,
                                    layout:'form',//layout:'column'布局格式不显示fieldLabel字段,需要嵌套layout:'form'布局格式
                                    xtype:'textfield',
                                    allowBlank:false,
                                    labelWidth:60,
                                    labelAlign:'right',
                                    blankText:'不能为空,请填写',
                                    name:'userName',
                                    anchor:'90%'
                                },{
                                    columnWidth:.2,
                                    layout:'form',
                                    labelAlgin:'right',
                                    items:[{
                                            xtype:'radio',
                                            fieldLabel:'性别',
                                            labelWidth:40,
                                            labelAlign:'right',
                                            layout:'form',
                                            boxLabel:'男',
                                            name:'sex',
                                            checked:true,
                                            inputValue:'man',
                                            anchor:'95%'
                                        }]
                                },{
                                    columnWidth:.3,
                                    layout:'form',
                                    items:[{
                                            xtype:'radio',
                                            boxLabel:'女',
                                            labelSeparator:'',//去除分隔符
                                            name:'sex',
                                            inputValue:'woman',
                                            anchor:'95%'
                                       
                                        }]
                                }]
                        },{//上面是第一行
                            xtype:'panel',
                            layout:'column',
                            items:[{
                                    columnWidth:.5,
                                    fieldLabel:'出生日期',
                                    xtype:'datefield',
                                    layout:'form',
                                    labelWidth:60,
                                    labelAlign:'right',
                                    name:'birthday',
                                    anchor:'90%'
                                },{
                                    columnWidth:.5,
                                    layout:'form',
                                    items:[{
                                            labelWidth:40,
                                            xtype:'combo',
                                            name:'degree',
                                            labelAlign:'right',
                                            fieldLabel:'学位',
                                            store:['小学','初中','高中','专科','本科','硕士','博士'],
                                            emptyText:'请选择适合你的学历..',
                                            anchor:'90%'
                                        }]
                                }]
                        },{//上面是第二行
                            xtype:'panel',
                            layout:'column',
                            items:[{
                                    columnWidth:.3,
                                    fieldLabel:'使用框架',
                                    labelWidth:60,
                                    labelAlign:'right',
                                    layout:'form',
                                    xtype:'checkbox',
                                    boxLabel:'spring',
                                    name:'spring',
                                    inputValue:'spring'
                                   
                                },{
                                    columnWidth:.2,
                                    layout:'form',
                                    items:[{
                                            xtype:'checkbox',
                                            boxLabel:'struts2',
                                            name:'struts2',
                                            inputValue:'struts2',
                                            anchor:'95%'
                                        }]
                                },{
                                    columnWidth:.5,
                                    layout:'form',
                                    items:[{
                                        xtype:'checkbox',
                                        boxLabel:'hibernate',
                                        name:'hibernate',
                                        inputValue:'hibernate',
                                        ancher:'95%'
                                    }]
                                }]
                        },{//上面是第三行
                            xtype:'textfield',
                            fieldLabel:'Email',
                            labelWidth:60,
                            labelAlign:'right',
                            name:'email',
                            vtype:'email',//email验证
                            vtypeText:'Email格式错误',
                            anchor:'56%'//控制文本框长度
                           
                        },{//上面是第四行
                            xtype:'textarea',
                            fieldLabel:'个性签名',
                            labelWidth:60,
                            labelAlign:'right',
                            name:'oneWord',
                            height:50,
                            anchor:'95%'
                        },{//上面是第五行
                            xtype:'htmleditor',
                            fieldLabel:'想说的话',
                            labelWidth:'60',
                            labelAlign:'right',
                            name:'wantToSay',
                            anchor:'95%',
                            enableAlignments:false,//去除左右对其工具栏
                            enableLists:false  //去除列表工具栏
                        }],
                        buttons:[{text:'确定',handler:login,formBind:true},{text:'取消',handler:reset}]
                });
                function login(){
                    form.form.submit();
                }
                function reset(){
                    form.form.reset();
                }
            })
效果展示
[img]http://dl2.iteye.com/upload/attachment/0087/3474/c0ebeece-8345-3953-a344-e5e8390ac244.jpg[/img]

  • 大小: 33.8 KB
分享到:
评论

相关推荐

    Ext教程表单表格的使用

    【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和...

    ext表单

    EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验优秀的Web应用程序。EXT JS是一个强大的JavaScript库,提供了一系列组件化的UI...

    .archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc

    首先,Ext.FormPanel是ExtJS中用于创建表单的主要组件,它允许我们构建复杂的表单布局并处理用户输入的数据。 1. **Checkbox简单示例** Checkbox在ExtJS中用于创建复选框,可以用来让用户选择多个选项。在示例中,...

    Ext 添加功能form表单实例

    在这个例子中,通过`new Ext.FormPanel`来创建了一个表单面板,并设置了一些关键属性: - `frame`: 设置为`true`,表示表单周围有一个边框。 - `width` 和 `height`: 分别设置了表单的宽度和高度。 - `layout`: ...

    Ext 动态加载表单数据

    通过以上步骤,你可以实现动态加载Ext表单数据的功能。在实际应用中,可能还需要考虑错误处理、数据验证、动态更新等问题,但以上代码提供了一个基础的实现思路。不断学习和实践,你将能更好地掌握Ext JS在构建动态...

    ExtJs 动态添加表单

    在ExtJS中,我们可以使用`Ext.container.Container`类来创建一个容器,然后设置布局为`form`,以便容纳表单字段。例如: ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别

    当使用`Ext.FormPanel`的`getForm().submit()`方法进行异步提交时,主要特点是: - **自动处理表单数据**:`getForm().submit()`会自动获取表单内的所有字段值,无需手动构建参数对象。 - **内置验证**:在提交前...

    EXT表单验证之TextField

    EXT是Sencha公司开发的一款基于JavaScript的富客户端应用框架,它提供了一套完整的组件化UI构建工具,其中EXT表单(FormPanel)是用于创建复杂数据输入和验证的重要部分。在EXT表单中,TextField是最常见的输入控件...

    ext几个实例

    在EXTJS中,Ext.AJAX和Ext.FormPanel是两个核心组件,它们分别用于异步与服务器进行数据交互和构建用户界面表单。本文将详细介绍如何使用这两个组件构建一个完整的登录案例,包括与MySQL数据库的交互。 **1. Ext....

    ExtJs中表单formPanel的横向布局

    本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...

    Ext table布局实例 formpanel的table布局

    Ext JS的`Ext.form.Panel`(formpanel)是一个用于创建表单的组件,它可以包含各种输入控件、标签和其他表单元素。在formpanel中使用table布局,可以按照表格的形式组织表单元素,这在处理多列或多行表单布局时非常...

    extjs中的formPanel以及表单的应用

    FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...

    Ext表单之loadRecord用法详解

    本文将深入探讨Ext表单中的`loadRecord`方法,这是一个非常实用的功能,用于将数据记录加载到表单中,以便用户可以查看或编辑。我们将通过`loadRecord`方法的使用场景、工作原理以及示例代码来详细讲解这个知识点。 ...

    EXT异步提交FORM表单

    1. **初始化表单**:首先需要使用EXT创建一个表单对象,该对象将包含所有需要提交的字段。 ```javascript var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items...

    Ext2.0 form使用实例的例程

    在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...

    Ext2.0 form使用实例

    本文将详细介绍Ext2.0 FormPanel的使用,包括创建方法、控件配置以及布局管理。 首先,我们需要初始化提示信息功能和设置错误信息显示位置。通过`Ext.QuickTips.init()`启动快速提示功能,以便为表单中的控件提供...

    EXT提交表单,ASP.NET

    title: 'EXT表单', items: [ {xtype: 'textfield', name: 'username'}, {xtype: 'passwordfield', name: 'password'} ], buttons: [{ text: '提交', handler: function() { formPanel.getForm().submit({ ...

    extJs中关于formPanel动态添加组件的验证问题

    3. **更新验证状态**:如果在表单已经初始化并显示的情况下添加字段,可能需要手动触发FormPanel的验证,可以使用`formPanel.getForm().isValid()`来检查整个表单是否有效。 4. **错误处理**:当验证失败时,EXT JS...

Global site tag (gtag.js) - Google Analytics