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();
	}