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: "数据载入错误"
}
<%
}
%>
分享到:
相关推荐
FormPanel 是 ExtJS 中的一个核心组件,用于创建和处理表单元素,包括输入字段、按钮、选择框等。它提供了丰富的功能,如数据验证、远程提交、异步加载等,是构建用户交互界面的关键部分。 在ExtJS中,FormPanel是...
ExtJs 4.0 提供了多种类型的表单字段,如文本输入框、密码框、选择框等,以及表单容器,如Panel、FormPanel。这些组件允许开发者创建复杂且功能完备的表单。表单字段可以通过配置项定义,包括字段类型、验证规则、...
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局,即在一个表单中元素能够按照列分布,形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...
在本篇文章中,我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据,并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术,尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
总的来说,提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端通信的正确性,理解HTTP请求和响应的机制,以及熟悉ExtJS的API,都是实现这一功能的关键。通过以上步骤,你可以顺利地完成...
在这个实例中,FCKeditor 和 ExtJS 结合使用,可能是在ExtJS的某个组件(如表单)中嵌入了FCKeditor,以提供一个高级的文本编辑区域。这种结合允许用户在表单提交内容时,享受到类似于桌面应用的文本编辑体验,同时...
在EXT JS这个强大的JavaScript框架中,FormPanel是用于创建表单的重要组件,它允许开发者构建交互式的、数据驱动的Web应用程序。FormPanel不仅提供了一种布局管理方式,还支持各种表单元素,如文本框、复选框、下拉...
本文将详细介绍ExtJS中常用表单组件的创建、应用以及验证和数据绑定等方面的知识,旨在帮助读者深入理解和掌握ExtJS表单的使用方法。 ### 表单面板(FormPanel)的创建 在ExtJS中,表单面板(FormPanel)是创建...
1. **EXTJS FormPanel**: 这是EXTJS中用于创建表单的组件,可以包含各种表单元素,如文本框、按钮等。在文件上传场景中,FormPanel通常用于封装文件输入字段。 2. **FileField组件**: 这是EXTJS中的一个特殊表单...
- `Ext.form.FormPanel` 是 EXTJS 中用于创建表单的组件,它允许你添加各种表单元素如文本框、选择框等。 - 在实例中,`title` 属性定义了面板的标题,`frame` 为真表示面板具有边框,`plain` 设置为真让边框更...
在ExtJS中,`Ext.form.Panel`(或简称为`formpanel`)是一种非常重要的组件,用于创建表单来收集用户输入的数据。本文将详细介绍两种在ExtJS formpanel中加载数据的方法,以供开发者参考。 ### 方法一:使用`...
Extjs对分页、表单验证、表单组件的布局与初始化都提供了详细的指导,使得表单元素的开发更加高效。 表格组件GridPanel是Extjs中的亮点之一,它不仅可以展示大量数据,还支持复杂的列模型和行操作。此外,GridPanel...
在EXTJS4中,FormPanel是一个非常重要的组件,用于创建包含表单元素的用户界面。在某些场景下,我们可能需要一个FormPanel实例能够根据不同的情况提交到不同的URL。这个问题可以通过灵活地设置和操作FormPanel及其...
在Web开发中,FormPanel是ExtJS库中的一个关键组件,用于创建表单来收集用户输入的数据。这篇博客“FormPanel的插入与删除”显然探讨了如何在FormPanel中动态添加和移除字段,这对于构建可扩展和动态的用户界面至关...
6. **表单组件**:ExtJS的FormPanel提供了丰富的表单元素,如文本框、下拉框、复选框等,并支持验证、提交等功能,使得创建复杂的表单变得轻松。 7. **图表组件**:虽然ExtJS 2.1的图表功能相对较弱,但仍然提供了...
用户可以通过EXTJS的FormPanel进行预订操作,提交表单数据到ASP.NET的服务器端方法,处理预订逻辑并返回响应。 EXTJS还支持Ajax通信,这与ASP.NET的MVC模式或Web Forms模式都非常契合。EXTJS的Ajax请求可以调用ASP...