基于ExtJs的桌面系统（4)

关键词：formPanel，布局，form提交

今天开始写涉及表单提交的内容，于是用上了FormPanel，先看下api：

Although they are not listed, this class also accepts all the config options required to configure its internal Ext.form.BasicForm

The BasicForm is configured using the initialConfig of the FormPanel - that is
the configuration object passed to the constructor. This means that if you subclass FormPanel, and you wish to configure the BasicForm, you will need to insert any configuration options for the BasicForm into the initialConfig property.
Applying BasicForm configuration settings to this will not affect the BasicForm's configuration.
FormPanel uses a Ext.layout.FormLayout internally,
and that is required for fields and labels to work correctly within the FormPanel's layout. To nest additional layout styles within a FormPanel, you should nest additional Panels or other containers that can provide additional layout functionality. You
should not override FormPanel's layout.

By default, Ext Forms are submitted through Ajax, using Ext.form.Action.
To enable normal browser submission of the Ext Form contained in this FormPanel, override the Form's onSubmit, and submit methods:

var myForm = new Ext.form.FormPanel({
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.submit();
}
});

api这个是重写basicform里面的onsubmit和submit方法，这种是原始的html表单提交，而basicform原本的submit是进行ajax提交。

先看看代码，再慢慢解释：

var form4 = new Ext.form.FormPanel({
title:'提交盘点',
border:false,
labelWidth:80,
labelAlign:'right',
region: 'north',
height:120,
url:'inventory_saveCheck.action',
frame: true,
layout:'form',
items : [ {
layout : 'column',
items : [ {
columnWidth:.25,
layout : 'form',
items : [ {
fieldLabel : '盘点清单号',
xtype : 'textfield',
name : 'check.checkId',
id : 'checkId',
allowBlank:false,
blankText:"不能为空，请填写",
vtype:"alphanum",
vtypeText:"请输入数字",
} ]
}, {
columnWidth:.25,
layout : 'form',
items : [ {
fieldLabel : '盘点商品号',
xtype : 'textfield',
name : 'check.itemId',
id : 'itemId',
allowBlank:false,
blankText:"不能为空，请填写",
vtype:"alphanum",
vtypeText:"请输入数字",
} ]
}, {
columnWidth:.25,
layout : 'form',
items : [ {
fieldLabel : '应有数量',
xtype : 'textfield',
name : 'check.count',
id : 'count',
allowBlank:false,
blankText:"不能为空，请填写",
vtype:"alphanum",
vtypeText:"请输入数字",
} ]
}, {
columnWidth:.25,
layout : 'form',
items : [ {
fieldLabel : '缺少数量',
xtype : 'textfield',
name : 'check.amount',
id : 'amount',
allowBlank:false,
blankText:"不能为空，请填写",
vtype:"alphanum",
vtypeText:"请输入数字",
} ]
} ]
}],
buttonAlign : "center",
buttons:[
{
text:'确定',
handler:function(){// 点击取消按钮的操作事件
form4.getForm().submit({
waitTitle : '请等待' ,
waitMsg: '正在提交中',
success:function(form4,action){
if(action.result.success){
Ext.Msg.alert(action.result.msg);
store4_3.reload();
store4_2.load({
params:{listId:null},
});
store4.load({
params:{listId:null},
});
}else{
Ext.Msg.alert(action.result.msg);
}
},
failure:function(form4,action){
Ext.Msg.alert('提示','保存失败！');
}
});
}
},
{
text:'清空',
handler:function(){
form4.getForm().reset();
}
}
]
});

乍一看上去好像很复杂的样子，其实有几个关键点，首先是布局：

1.formpanel布局有两种，一种是form（竖排），另外一种是column（横排），但是最终的整体布局必须是form。先看到最外层的items，他的layout是form，这就是整体的布局，接下来第二层items，他的layout是column，因为我想让里面的每个items都横着排，最后里层的items每个layout都是form。里面还附带的简单的校验，较低版本有可能不支持。column的布局只为四个输入框，而按钮则属于外层的form布局。columnwidth:.25是指这个item占25%的位置。

2.表单提交，这里用的是原生的ajax异步提交，处理这个被点击的按钮事件首先要有一个handler，接着是ajax提交或者是重写后的html表单提交，waittitle是标题，waitmsg是内容，这里也是可已加入url的，但是我在form里已经加了，所以这里就没写了。success这里说下要返回json数据类型，我的返回是{'success:'true,'msg':'ok'}。成功提交之后你可以对你也可以进行其他操作例如其他部件的重新加载。

最后遇到一个问题，这个formpanel的window打开第一次这个formpanel是能显示的，然而关闭window后再次打开就无法显示，用的是border的布局，希望各位大大指导一下这种情况怎么解决。