关于对ExtJs中FormPanel,BasicForm的理解
最近正在用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();
});