`

ExtJs表单FormPanel

阅读更多

1.简单表单实例

/**
   简单表单实例(与JSP页面进行交互)
 */
function createSimpleFormPanel(){
    var myFormPanel = new Ext.form.FormPanel({
        renderTo: document.body,
        title: '我的表单',
        width: 250,
        height: 300,
        labelWidth: 60,
        items:[{//设定表单中的元素
            xtype: 'textfield',
            name: 'username',
            fieldLabel: '用户名'
        },{
            xtype: 'textfield',
            name: 'password',
            inputType: 'password',
            fieldLabel: '密码'
        },{
            xtype: 'textfield',
            name: 'email',
            inputType: 'email',
            fieldLabel: '邮箱'
        },{
            xtype: 'datefield',
            name: 'birthday',
            fieldLabel: '出生日期'
        },{
            xtype: 'textarea',
            name: 'description',
            fieldLabel: '简介'
        }],
        buttons:[{
            text: '保存',
            width: 40,
            handler: function(){
                //此处可以用myFormPanel.getForm()和myFormPanel.form两种方法获得表单对象.
                myFormPanel.getForm().submit({//提交表单数据
                    url: 'reg.jsp',//处理页面,注意返回内容格式的正确性
                    method: 'post',
                    success: function(form, action) {//保存成功
                        Ext.Msg.alert('Success', action.result.msg);
                    },
                    failure: function(form, action) {//保存失败
                        Ext.Msg.alert('Failure', action.result.msg);
                    }
                }) ;
            }
        },{
            text: '重置',
            width: 40,
            handler: function(){
                myFormPanel.form.reset() ;//重置表单
            }
        },{
            text: '加载数据',
            handler: function(){
                myFormPanel.form.load({//从后台加载数据
                    url: 'loadReg.jsp',
                    params: {
                        id: 'load'
                    }
                }) ;
            }
        },{
            text: '设值',
            width: 40,
            handler: function(){
                myFormPanel.form.setValues({//设置表单的值
                    username: 'a',
                    password: 'b',
                    email: 'a@b.c',
                    birthday: '7/17/2011',
                    description: 'd'
                }) ;
            }
        }]
    }) ;
}
Ext.onReady(createSimpleFormPanel);//创建动态树

2.reg.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String username = request.getParameter("username") ;
    System.out.println(username) ;
    if(username!=null && "ysj".equals(username)){
%>
        {"success":true,"msg":"save success"}
<%
    }else{
%>
        {"success":false,"msg":"save failure"}
<%    
    }
%>

3.loadReg.jsp代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("id") ;
	if(id!=null && "load".equals(id)){
%>
{
    success: true,
    data: {
        username: "Fred. Olsen Lines喻",
        password: "FXT",
        email: "abc@bcd.cm",
        description: "OSL"
    }
}
<%
	}else{
%>
{
    success: false,
    msg: "数据载入错误"
}
<%
	}
%>
 

 

 

 

 

0
1
分享到:
评论

相关推荐

    extjs中的formPanel以及表单的应用

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

    ExtJs4.0 表单提交Demo

    ExtJs 4.0 提供了多种类型的表单字段,如文本输入框、密码框、选择框等,以及表单容器,如Panel、FormPanel。这些组件允许开发者创建复杂且功能完备的表单。表单字段可以通过配置项定义,包括字段类型、验证规则、...

    ExtJs中表单formPanel的横向布局

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

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    ExtJS的表单

    ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已

    如何提交Extjs 中的表单

    总的来说,提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端通信的正确性,理解HTTP请求和响应的机制,以及熟悉ExtJS的API,都是实现这一功能的关键。通过以上步骤,你可以顺利地完成...

    FCKeditor结合extjs实例

    在这个实例中,FCKeditor 和 ExtJS 结合使用,可能是在ExtJS的某个组件(如表单)中嵌入了FCKeditor,以提供一个高级的文本编辑区域。这种结合允许用户在表单提交内容时,享受到类似于桌面应用的文本编辑体验,同时...

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

    在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...

    Extjs中常用表单介绍与应用

    本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...

    extjs上传全代码

    1. **EXTJS FormPanel**: 这是EXTJS中用于创建表单的组件,可以包含各种表单元素,如文本框、按钮等。在文件上传场景中,FormPanel通常用于封装文件输入字段。 2. **FileField组件**: 这是EXTJS中的一个特殊表单...

    EXTJS修改颜色实例源码

    - `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...

    简单的两种Extjs formpanel加载数据的方式

    在ExtJS中,`Ext.form.Panel`(或简称为`formpanel`)是一种非常重要的组件,用于创建表单来收集用户输入的数据。本文将详细介绍两种在ExtJS formpanel中加载数据的方法,以供开发者参考。 ### 方法一:使用`...

    轻松搞定Extjs 带目录

    Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导,使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel...

    extjs4如何给同一个formpanel不同的url_.docx

    在EXTJS4中,FormPanel是一个非常重要的组件,用于创建包含表单元素的用户界面。在某些场景下,我们可能需要一个FormPanel实例能够根据不同的情况提交到不同的URL。这个问题可以通过灵活地设置和操作FormPanel及其...

    FormPanel的插入与删除

    在Web开发中,FormPanel是ExtJS库中的一个关键组件,用于创建表单来收集用户输入的数据。这篇博客“FormPanel的插入与删除”显然探讨了如何在FormPanel中动态添加和移除字段,这对于构建可扩展和动态的用户界面至关...

    extjs2.1库文件

    6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如文本框、下拉框、复选框等,并支持验证、提交等功能,使得创建复杂的表单变得轻松。 7. **图表组件**:虽然ExtJS 2.1的图表功能相对较弱,但仍然提供了...

    asp.net下extjs完整实例

    用户可以通过EXTJS的FormPanel进行预订操作,提交表单数据到ASP.NET的服务器端方法,处理预订逻辑并返回响应。 EXTJS还支持Ajax通信,这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...

Global site tag (gtag.js) - Google Analytics