Extjs4之 formpanel使用

来源：互联网发布：qq视频变声软件编辑：程序博客网时间：2024/04/27 00:33

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的表单数据formpanelfunction 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();}

0 0