Extjs!!!求一个js既可以做修改界面，又可以做保存界面，并且是formpanel的

Question

保存界面就是指添加数据的界面；
修改界面就是把刚才保存的数据加载出到对应的输入框中去

Answer 1

如果是得到表中的所有数据还是比较好做的，但是得到一个formpanel，如果使用jsonStore的话，你很难从页面上得到它对应的动态id，再把该条记录从数据库里面查询出来，关注楼下的吧，顶

Answer 2

GroupinfoForm = function(config) {
Ext.apply(this, config);

GroupinfoForm.superclass.constructor.call(this, {
frame: true,
autoHeight: false, 
closable:true,
autoScroll : true,
enableDragDrop:false,
enableColumnMove:false,
labelAlign : 'right',
labelWidth : 85,
buttonAlign : 'center',
items:[{
  layout:'column',
            items:[
{xtype:'hidden',name: 'groups.id'},
{xtype:'hidden',name: 'groups.version'}, 
                {columnWidth:.5,layout: 'form',
                 items: [
                          {xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.code"/>',name: 'groups.code',anchor:'95%',allowBlank:false,blankText:'<fmt:message key="groupinfo.blankText"/>', maxLength:20,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',vtype: 'kongziduan',regex:/^[A-Za-z0-9]+$/,regexText:'<fmt:message key="groupinfo.onlyNumberAndword"/>'},
                          {xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.bossId"/>',name: 'groups.bossId',anchor:'95%', maxLength:15,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',regex:/^[0-9]\d*$/,regexText:'<fmt:message key="groupinfo.onlyNumber"/>'},
{xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.tel"/>',name: 'groups.tel',anchor:'95%', maxLength:15,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',vtype: 'shoujihaoma'},
                   {xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.cpId"/>',name: 'groups.cpId',anchor:'95%', maxLength:15,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',regex:/^[A-Za-z0-9;]+$/,regexText:'<fmt:message key="groupinfo.onlyNumberAndword2"/>'}
                  ]},
            {columnWidth:.5,layout: 'form',
             items: [{xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.fullname"/>',name: 'groups.fullname',anchor:'95%',allowBlank:false,blankText:'<fmt:message key="groupinfo.blankText"/>', maxLength:25,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',vtype: 'kongziduan',regex:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,regexText:'<fmt:message key="input.errorWord"/>'},
                     {xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.shortname"/>',name: 'groups.shortname',anchor:'95%', maxLength:15,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',vtype: 'kongziduan',regex:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,regexText:'<fmt:message key="input.errorWord"/>'},
{xtype:'textfield',fieldLabel: '<fmt:message key="groupinfo.addr"/>',name: 'groups.addr',anchor:'95%', maxLength:40,
                   maxLengthText:'<fmt:message key="uploadfile.maxlengthText"/>',vtype: 'kongziduan',regex:/^[\u4e00-\u9fa5_a-zA-Z0-9]+$/,regexText:'<fmt:message key="input.errorWord"/>'}
                ]}              
             ] } 
],
buttons:[
            { text : '<fmt:message key="button.save"/>',handler : this.save,scope : this }, 
            { text : '<fmt:message key="formReset"/>',handler : this.reset,scope : this }
        ]
});  

    this.loadById();
};Ext.extend(GroupinfoForm, Ext.form.FormPanel, {    save : function() {
     
      if(this.getForm().isValid()){
        var thisForm = this;
this.getForm().submit({
url: '<c:url value="/groupinfo/savegroups.html"/>',
success: function(response,action){

var responseObject = Ext.util.JSON.decode(action.response.responseText);
 if(responseObject.success==true){
if(responseObject.message){
                  showMsg("",responseObject.message);
}else{
showMsg('','<fmt:message key="saveSuccess"/>');
closeTab(thisForm,"groupspanel");
}
 }else{
  showMsg('','<fmt:message key="groupinfo.saveFailureByKey"/>');
 }
 
},
failure:function(response,action){

var responseObject = Ext.util.JSON.decode(action.response.responseText);
 if(responseObject.failure==true){
 showMsg('','<fmt:message key="saveFailure"/>');
 }else{
  showMsg('','<fmt:message key="groupinfo.saveFailureByKey"/>');
 }
              
                   
}
});
}
},

    close : function(){
        closeTab(this,'groupspanel');
     },
     
     reset : function() {
if(this.dataid){
      this.getForm().load();
      }
      else{
      this.getForm().reset();
      }
 },
     
loadById : function() {

if(this.dataid){

this.getForm().url = '<c:url value="groupinfoManager/getGroupsData.html?dataid="/>'+this.dataid;
this.getForm().load();
}

     }});下面是主页面调用添加修改的方法createGroup: function(){
       var form = new GroupinfoForm({ 
             id : 'newGroup',
            title : '<fmt:message key="groupinfo.save"/>'});
       openTab(form); 
    },
    
    editGroups : function(record){
        record = (record && record.data) ? record : this.getSelectionModel().getSelected();
        var d = record.data;
        if(d){
            var formType = 'update';
             };
            var form = new GroupinfoForm({ 
             id : 'groups_' + d.id,
                dataid : d.id,
            title : '<fmt:message key="groupinfo.update"/>', 
            xtype :'groupinfoForm'});
            openTab(form); 
     },
   

Answer 3

修改界面就是把刚才保存的数据加载出到对应的输入框中去只要给添加的form 加一个 reader 属性 并对这个form调用一下load如  formPanel.getForm().doAction('load',{
    url:'',
     params:{},
    success :function(){}
   ...
})