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: "数据载入错误"
}
<%
}
%>
分享到:
相关推荐
ExtJs中表单formPanel的横向布局
一个简单的ExtJs4.0搭建环境,利用Ext Ajax的方式提交表单,可使得显示层和控制层完全分开.
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
Extjs4 表单从数据库读取数据映射到对应的字段中显示
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
这是我花费数月写的关于Extjs的原创教程,共29个章节。下面是目录: 目 录 1 第一章:序 6 第二章:准备与资源 9 一、下载 9 二、拦路虎 9 三、布署环境 11 四、SpketIDE 12 五、资源 16 六、小结 16 第三章:Ext ...
主要介绍了ExtJS4如何给同一个formpanel不同的url,需要的朋友可以参考下
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 1.3 为什么有些示例必须放在服务器上 才能看到效果 2 1.4 Hello World 2 1.4.1 直接使用下载的发布包 2 1.4.2 在项目中使用EXT...
目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的。所以它有着panel的属性 要...
var fset = new Ext.FormPanel({ title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:...
userForm = new Ext.FormPanel({ id:'conditionForm', labelWidth:'80', labelAlign:'right', border:false, bodyBorder:false, frame:true, items:[ layout:'column', items:[ { columnWidth:'.8', ...
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
Extjs中的表单组件是Ext.form.BasicForm,不过最简单最常用的是Ext.form.FormPanel控件,它继承自Panel,具有一定的界面显示控制能力,它其中包含着一个BasicForm对象,用来执行向服务器提交,加载等动作。Extjs也对...
CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: ... 具体定义如下: 代码如下: var fp = Ext.create(‘Ext.FormPanel’, { frame: true, fieldDefaults: {
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.