Extjs4之 formpanel使用

grid的列表数据



formpanel 布局

//  formpanel 表单
var formPanel = Ext.create('Ext.form.Panel',{
id : 'formPanel_TemporaryAttendance',
modal : true,
autoScroll : true,
closable : true,
closeAction : 'hide',
bodyPadding: 10,
defaults: {
labelAlign:'right',
anchor: '100%',
labelWidth: 100
},
draggable : true,
floating : true,
frame : true,
width : 800,
maxHeight : 600,
iconCls : 'modalWin',
loader : {loadMask: true},
title : '新增',
//layout : 'form',
items:[{
xtype :'fieldcontainer',
layout:'hbox',
defaults:{
labelAlign : 'right',
flex:0.25
},
items: [
{xtype:'textfield',name:'TemporaryAttendance.uuid',fieldLabel: '临时考勤名称'},
{xtype:'textfield',name:'TemporaryAttendance.barcode',fieldLabel: '临时考勤名称'},
{xtype:'textfield',name:'TemporaryAttendance.teacherid',fieldLabel: '临时考勤名称'}
]
},
{
xtype     : 'textfield',
id		  : 'name',
name      : 'TemporaryAttendance.name',
fieldLabel: '临时考勤名称',
allowBlank: false
},
{
xtype: 'fieldcontainer',
/* fieldLabel: 'Date Range',
combineErrors: true,*/
//msgTarget : 'side',
layout: 'hbox',
defaults: {
labelAlign:'right',
flex: 0.5
//hideLabel: true  //隐藏label名称  ->fieldLabel
},
items: [
{
xtype     : 'datefield',
id		  : 'courseStartTime',
name      : 'TemporaryAttendance.courseStartTime',
fieldLabel: '上课开始时间',
format:'Y-m-d',//Y-m-d H:i:s
allowBlank: false
},
{
xtype     : 'datefield',
id		  : 'courseEndTime',
name      : 'TemporaryAttendance.courseEndTime',
fieldLabel: '上课结束时间',
format:'Y-m-d',//Y-m-d H:i:s
allowBlank: false
}
]
}
],
buttonAlign:'center',
buttons: [{
text: '提交',
handler: function() {
// The getForm() method returns the Ext.form.Basic instance:
var form = formPanel.getForm();
if (form.isValid()) {
// Submit the Ajax request and handle the response
/* form.submit({
clientValidation: true,
url : '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceSave.json',
params: formPanel.getValues(),
success: function(form, action) {
Ext.Msg.alert('Success', 'Success');
},
failure: function(form, action) {
Ext.Msg.alert('Failed', 'Failed');
}
}); */
Ext.Ajax.request({
url: '${basePath}temporaryattendance/temporaryattendance!temporaryAttendanceSave.json',
params: formPanel.getValues(),
success: function(response, options){
var result = Ext.decode(response.responseText);
if(result['frf_success']){
//Ext.Msg.alert('提示','新增成功');
Ext.MessageBox.show({
title : globalVar.msgs.alertTitle,
msg : globalVar.msgs.msgSuccess,
icon : Ext.Msg.INFO,
buttons: Ext.Msg.OK
});
formPanel.getForm().reset();
formPanel.hide();
temporaryAttendanceGrid.getStore().load();
}
},
failure: function(response, options){
var result = Ext.decode(response.responseText);
if(result['frf_success']){
Ext.Msg.alert('提示','新增失败');
Ext.MessageBox.show({
title : globalVar.msgs.alertTitle,
msg :result['frf_exception'] || globalVar.msgs.msgFailure,
icon : Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
},
scope: this
});
}
}
},{
text:'关闭',
handler:function(){
//重置formpanel
formPanel.getForm().reset();
formPanel.hide();
}
}]
});

如图所示



//formpanel表单修改，无需请求后台，即可load的表单数据formpanel

//formpanel表单修改，无需请求后台，即可load的表单数据formpanel
function editForm()
{
formPanel.setTitle("修改");
var selRec = temporaryAttendanceGrid.getSelectionModel().getLastSelected();
//获取 formpanel的使用的字段信息
var formFields = formPanel.getForm().getFields();
//循环 formpanel的字段并给与赋值操作
for (var i = 0, ilen = formFields.keys.length; i < ilen; i++) {
var comp = Ext.getCmp(formFields.keys[i]);
//var name = comp.getName().replace(this.entityName + '.', '');
var name = comp.name;
var id = comp.id;
var val = '';
if (name !== 'undefined' && name != '') {
val = eval('selRec.raw.' + id);
} else {
var field = name.replace(/\./g, '_');
if (typeof selRec.get(field) !== 'undefined') {
val = selRec.get(field);
} else {
var path = name.split('.');
try {
val = eval('selRec.raw.' + id);
} catch(e) {}
}
}

if (comp.getXType() === 'datefield') {
if(typeof val !== 'undefined') {
if(val != null){
val = val.substr(0, 10);
}
}

comp.setValue(val);
}
if (comp.xtype === 'checkboxgroup' || comp.xtype === 'radiogroup') {
var objVal = {};
if(comp.xtype === 'radiogroup'){
objVal[comp.getName()] = val
}else{
objVal[comp.getName()] = val.split(',')
}
comp.setValue(objVal);
} else if (val != null && comp.xtype === 'combo') {
comp.setValue(val.split(','));
} else if (val != null && comp.xtype === 'combo' && comp.multiSelect) {
comp.setValue(val.split(','));
} else if (comp.xtype === 'textareafield') {
comp.setValue(val.replace(/<br>/g, '\n'));
} else {
if (typeof val !== 'undefined') {
comp.setValue(val);
}
}
}
formPanel.show();
}