简单的Form 表单提交：
一：普通方式提交：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My First ExtJS - Login Page</title>
<!-- ExtJS -->
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/ExtJS4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/ExtJS4/examples/shared/example.css" />
<script type="text/javascript" src="<%=basePath%>/ExtJS4/ext-all.js"></script>
<script type="text/javascript">
Ext.require([ '*' ]);
Ext.onReady(function() {
var frmPanel = Ext.create('Ext.form.Panel', {
renderTo : Ext.getBody(),
title : 'User Form',
height : 150,
width : 280,
bodyPadding : 10,
standardSubmit:true, //标准方式
defaultType : 'textfield',
items : [ {
fieldLabel : 'User Name',
name : 'userName',
allowBlank:false//判断是否为空
}, {
fieldLabel : 'User Password',
name : 'userPassword',
inputType:'password', //密码框
allowBlank:false
} ],
buttons : [ {
text : 'Submit',
handler : login
}, {
text : "Reset",
handler : reset
} ]
});
//登录方法
function login() {
if(frmPanel.form.isValid()){
frmPanel.form.submit({
clientValidation:true,
url:'<%=basePath%>homePage/login',
method:'POST',
waitMsg:'正在登录系统，请稍后...'
});
}
}
function reset() {
frmPanel.form.reset();
}
});
</script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
在“ExtJs4.0 表单提交Demo”中，我们将深入探讨如何在ExtJs 4.0环境下，通过Ext Ajax模块实现表单的数据提交，同时实现显示层和控制层的分离，提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
在本文中，我们将深入探讨如何优化EXTJS中的Form表单提交过程，特别是在EXTJS应用程序中。EXTJS是一个强大的JavaScript框架，用于构建富客户端Web应用程序，而表单提交是任何应用程序中不可或缺的部分。优化这一过程...
console.log('表单提交', action.result); }); ``` 5. **动态移除字段**： 当需要移除某个字段时，可以使用`remove`方法： ```javascript formPanel.remove(textField); formPanel.doLayout(); ``` 6. **...
在开发使用Extjs4框架的应用程序时，可能会遇到form表单提交后，无法正确进入success回调函数的问题。针对这个问题，首先需要进行两个方面的检查和确认，以确保form提交操作能够顺利进入success回调函数。 首先，...
在本篇文章中，我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值，并结合提供的代码示例进行详细解析。对于前端开发者来说，掌握如何高效地操作表单元素是必不可少的一项技能，尤其是在使用像ExtJs这样的强大...
保存提交代码，extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
在EXTJS这个强大的JavaScript框架中，表单提交是应用程序中不可或缺的一部分，特别是在处理用户输入数据和与服务器进行数据交换时。EXTJS提供了丰富的组件和功能，使得构建动态、交互式的Web应用变得更加简单。本篇...
这个方法会接收到ExtJS表单提交的数据，并根据业务逻辑进行处理。返回的字符串将作为`action.result.message`显示在前端。 总的来说，提交ExtJS表单涉及前端的表单构建、事件监听以及后端的接收和处理。确保前后端...
`Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单，并且提供了大量的功能来帮助处理表单数据，如验证、提交以及数据绑定等。 ### 二、...
`Ext.form.Action`是ExtJS中的一个类，用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success**: 执行成功后的回调函数，该函数接收两个参数：`form`（当前...
ExtJS的表单使用FormPanel容器 表单使用的布局方式：form和formtable布局 ExtJS的表单和html的form标签是相似的，新建一个FormPanel实际上就是新建一个html的form标签，只是添加许多Ext的样式而已
5. **事件监听**：设置事件监听器来处理用户交互，如表单提交、字段变化等。 6. **渲染和显示**：将表单渲染到页面上，让用户可以操作。 从提供的标签“源码”和“工具”来看，可能包含的资源kk.doc可能是一个示例...
### Extjs 表单验证详解 #### 一、引言 在现代Web开发中，确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架，提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...
主要用例子说明extjs4的form表单的运用，其中有表单属性说明，表单控件运用说明如： title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
本文将深入探讨如何在ExtJs中使用`FormPanel`组件结合`form`和`column`布局属性来实现横向布局，即在一个表单中元素能够按照列分布，形成一种更为直观和用户友好的界面设计。 ### 一、理解`FormPanel`及其属性 `...
虽然示例中没有给出第四种方式，但EXT JS的FormPanel还支持直接在配置中指定Action，这样在表单提交时，EXT JS会根据Action配置自动处理提交逻辑。Action可以是一个包含处理提交的控制器方法的URL，或者是一个EXT ...
表单数据的提交和验证可通过`submit`方法实现。 **二、网格（Grid）** 网格是展示和操作大量结构化数据的利器。在ExtJS中，`Ext.grid.Panel`是创建网格的主要组件。你可以通过`columns`配置定义列，每列由一个对象...