最近正在用ExtJs2.2开发项目的UI,至于为何要用ExtJs开发这个就不说了,看了官方的demo就知道了。由于对JS不是很
熟,开发中遇到了不少的问题,在此也要感谢网上那些无私奉献的朋友们,正是有了你们,才坚定了学习ExtJs的信心。
为了自身查阅方便,也为了给网友们一些参考,写点文章。有错误的地方,还请各位大侠指正。
//loginForm为FormPanel
var formValues1= Ext.getCmp("loginForm").getForm().getValues(false);//返回表单字段数组对象
var formValues2 = Ext.getCmp("loginForm").getForm().getValues(true);//返回表单字符串
alert(formValues2.userNo);//返回表单中字段为userNo的值
alert(formvalues2);//返回表单字段的键值对,字段间以&隔开
给表单第一个字段设置焦点:
如果是window
listeners: {
'show': function() {
this.findByType('textfield')[0].focus(true, true); //第一个textfield获得焦点
}
},
如果是formpanel可以加如下代码
listeners : {
'render' : function() {
this.findByType('textfield')[0].focus(true, true); //第一个textfield获得焦点
}
},
都蛮好用的。
隐藏标签:
{
xtype: 'textfield',
name: 'FID',
id: 'FID',
hidden: true,
hideLabel:true
}]
});
只需将textfield的hidden和hideLabel配置为true就可以了。只设置hidden:true时会显示出来一个:的标签。
ExtJs form Ajax提交:
function login() {
Ext.QuickTips.init();
// Ext.Msg.alert("系统提示","login.js is here");
var loginForm = new Ext.form.FormPanel({
id : 'loginForm',
baseCls : 'x-plain',
plain : true,
defaults : {
anchor : '95%'
},
defaultType : 'textfield',
items : [{
id : 'userNoFromKey',
name : 'userNoFromKey',
hidden : true,
hideLabel : true
}, {
id : 'userNo',
name : 'userNo',
fieldLabel : '用户名',
blankText : "用户名不能为空!",
allowBlank : false
}, {
id : 'pwdFromKey',
name : 'pwdFromKey',
hidden : true,
hideLabel : true
}, {
id : 'password',
name : 'password',
fieldLabel : '密 码',
inputType : 'password',
blankText : "密码不能为空!",
allowBlank : false
}, {
id : 'serialIdFromKey',
name : 'serialIdFromKey',
hidden : true,
hideLabel : true
}
]
});
var loginWin = new Ext.Window({
title : '一卡通系统登录页面',
width : 500,
height : 180,
items : loginForm,
plain : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'center',
layout : 'fit',
buttons : [{
text : '登录',
handler : submitForm
}, {
text : '重置',
handler : resetForm
}],
listeners : {
'show' : function() {
this.findByType('textfield')[0].focus(true, true); // 第一个textfield获得焦点
}
}
});
function submitForm() {
//alert("submit...");
var form = Ext.getCmp("loginForm").getForm();
if (form.isValid()) {
//alert("isvalid");
form.submit({
url : 'login.do?method=login',
method : 'POST',
success:function(form,action)
{
var isSucc = action.result.success;
if(isSucc)
{
var forward = action.result.data;
//alert(forward);
window.location.href=forward;
}
else
{
Ext.Msg.alert("系统提示", "用户登录失败");
}
},
failure : function(form, action) {
Ext.Msg.alert("系统提示", "用户登录失败");
}
});
}
}
function resetForm() {
alert("reset...");
Ext.getCmp("loginForm").getForm().reset();
}
loginWin.show();
}
Ext.onReady(login);
ExtJs 的form默认采用Ajax提交,如果必须采用普通form提交,则必须实现
var myForm = new Ext.form.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit();
}
});//来自API解释
代码如下:
Ext.onReady(function()
{
Ext.QuickTips.init();
var form1 = new Ext.form.FormPanel({
baseCls : 'x-plain',
renderTo:"loginForm", //要渲染的div
labelWidth: 75, // label settings here cascade unless overridden
method:'POST',
bodyStyle:'padding:5px 5px 0',
width: 400,
defaults: {width:300},
defaultType: 'textfield',
//实现非AJAX提交表单一定要加下面的两行!
onSubmit: Ext.emptyFn,
submit: function()
{
this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址
this.getEl().dom.submit();
},
items: [{
fieldLabel: '用户名',
id: 'username',
name: 'name',
allowBlank:false,
blankText : "用户名不能为空",
width:360
},{
fieldLabel: '密码',
blankText : "密码不能为空",
id: 'password',
name: 'pwd',
allowBlank:false,
minLength : 6,
width:360,
inputType:'password' //类型为password
}
],
buttons: [{
text: '登录',
type:'button',
id:'login',
handler: function()
{
//表单验证通过
if (form1.form.isValid())
{
//提交form
form1.form.submit();
}
}
},{
text: '重置',
type:'reset',
id:'clear',
handler: function()
{
form1.form.reset();
}
}
]
});
//将form添加window中
var window = new Ext.Window({
title: '用户登录',
width:500,
height:200,
layout: 'fit',
plain:true,
bodyStyle:'padding:5px;',
buttonAlign:'center',
items: form1
});
//显示window
window.show();
});
分享到:
相关推荐
总之,EXTJS4中的FormPanel结合BasicForm,为我们提供了一种灵活的方式来处理表单的提交。通过动态设置BasicForm的URL,我们可以实现同一个FormPanel实例根据不同的需求提交到不同的服务器端接口,提高了代码的可...
在ExtJS4中,FormPanel是一个非常常用的组件,用于创建包含表单元素的用户界面。然而,有时我们可能需要在同一个FormPanel实例中为不同的操作指定不同的提交URL。标题和描述提到的问题,实际上涉及到如何动态地改变...
首先,我们要明白,在ExtJs中,增删改查通常是通过与后端服务(如Java后端)进行通信来实现的,ExtJs本身提供了丰富的组件,让我们可以方便地创建表单,发起请求,并对服务器返回的结果进行处理。 在描述中提到的...
根据提供的文件信息,我们可以深入探讨如何在ExtJS中利用FormPanel进行数据加载和提交的核心概念与实践技巧。 ### FormPanel的Form对象 在ExtJS框架中,`FormPanel`是处理表单数据的一个核心组件。当我们在使用`...
以上是 `Extjs` 中常用的表单类及其属性和方法的详细介绍,这些类和方法提供了丰富的功能,帮助开发者快速构建功能完备的 Web 表单应用。通过掌握这些基础知识,可以有效地提高开发效率并确保应用程序的质量。
深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 ...4.2 FormPanel和BasicForm详解 77 4.3 EXT支持的控件 77 4.3.1 控件继承图 77 4.3.2 表单控件 78 4.3.3 基本输入控
- **params**: 传递到请求中的额外参数,可以是键值对的形式。 - **url**: 动作提交的目标URL。 - **waitMsg**: 动作执行时显示的等待信息,用于提升用户体验。 **属性** - **Action.CLIENT_INVALID**: 客户端验证...
在本文中,我们将深入探讨 `Ext.form` 模块中的 `Action` 和 `BasicForm` 类,以及 `FormPanel` 组件,这些都是EXTJS中处理表单操作的关键概念。 1. **Ext.form.Action** - `success` 和 `failure` 回调函数:这两...
在本篇Extjs学习笔记中,我们将深入探讨Extjs中的Form,特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先,Extjs中的表单组件主要基于Ext.form.BasicForm,这是一个基础的表单对象,负责处理表单数据...