关于Ext中重复加载的问题！即增加和修改使用同一个Form

ghl116

浏览: 163951 次
性别:
来自: 上海

最近访客更多访客>>

zzy7075

存储炒菜错

yaofangshou

Adan-Chiu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ext form widow

最近在写Ext的程序，增加和修改时，打算使用同一个Form，增加和修改的Widow通过hide 和show来控制显示，

但是出现了一个问题，在网上查了半天，终于解决了，原来是Form中字段设置了id，把id取消就好了，参考网址

http://topic.csdn.net/u/20100618/11/a09196cc-550b-41e2-9e19-1c331d54aa1c.html

 var STUDENT=Ext.data.Record.create([ 
   {name:"sid",type:"string"},  
   {name:"sname"}, 
   {name:"birthday",type:"string"},//type:"date",dataFormat:"Y-m-d"}, 
   {name:"city",type:"string"}, 
   {name:"stature",type:"int"} 
 ]); 
 Ext.apply(Ext.form.VTypes, { 
     LengthLimit:  function(v) { 
         return v.length <=10 
     }, 
     LengthLimitText: "字符串长度不能大于10", 
     IntLimit:function(v){ 
       return v <300; 
     }, 
     IntLimitText:"身高不能大于300" 
 }); 
  
 /******************** 
 *表格，显示人员信息，继承自Ext.grid.GridPanel 
 * 
 ********************/ 
 StudentListGrid=Ext.extend(Ext.grid.GridPanel,{ 
     _store:null, 
     _tbar:null, 
     _addWin:null, 
     _updateWin:null, 
     constructor:function(){ 
           this._store=new Ext.data.JsonStore({ 
               autoLoad:true, 
               url : "grid_service.jsp?action=getAllStudents", 
 			  root:"rows",         
               id:"id", 
               fields:STUDENT, 
               sortInfo:{field: "sid", direction: "DESC"} 
                             
          }); 
          this._tbar=new Ext.Toolbar({ 
             id:"mainMenu", 
             items:["-", 
             { 
              text:"增加用户", 
              id:"addBtn", 
              iconCls:"adduser", 
              handler:function(){ 
                
              this._addWin.show(); 
              this._addWin._form.getForm().reset(); 
              }, 
              scope:this 
              },"-", 
              { 
              text:"修改用户", 
              id:"updateBtn", 
              iconCls:"modifyuser", 
              handler:this.updateFn, 
              scope:this 
              },"-", 
              { 
              text:"删除用户", 
              id:"delBtn", 
              iconCls:"deleteuser", 
              handler:this.deleteFn, 
              scope:this 
              },"-","->", 
              { 
                xtype:"textfield", 
                fieldLabel:"请输入姓名", 
                id:"searchName", 
                width:100, 
                emptyText:"-请输入姓名" 
              },"-",{ 
                text:"搜索", 
                width:50, 
                iconCls:"search", 
                handler:this.searchFn, 
                scope:this 
              },"-" 
             ] 
           
          }); 
          this._addWin=new AddNewStudentWindow(); 
          this._updateWin=new UpdateStudentWindow(); 
        StudentListGrid.superclass.constructor.call(this,{ 
           title:"学生列表", 
           renderTo:Ext.getBody(), 
           id:"main_grid", 
           frame:true, 
           height:300, 
           width:500, 
           tbar:this._tbar, 
           store:this._store, 
           sm: new Ext.grid.RowSelectionModel({ 
                  singleSelect:true 
              }), 
            columns:[ 
              {header:"SID",dataIndex:"sid",hidden:true}, 
              {header:"姓名",dataIndex:"sname"}, 
              {header:"生日",dataIndex:"birthday",renderer:this.birthdayFn}, 
              {header:"所在城市",dataIndex:"city"}, 
              {header:"身高",dataIndex:"stature"} 
           ] 
            
         }); 
         
      
      
     }, 
     birthdayFn:function(value){ 
     
     if(typeof(value)=="string") 
       return value.substring(0,10); 
      else 
      return Ext.util.Format.date(value,"Y-m-d"); 
     }, 
     updateFn:function(){ 
        var sm=this.getSelectionModel(); 
                 if(sm.getCount() == 0) { 
 		           Ext.Msg.show({ 
 					  title : '注意!', 
 					  msg : '请选择需要修改的学生!', 
 					  icon : Ext.MessageBox.WARNING, 
 					  buttons : Ext.MessageBox.OK 
 				}); 
 		     return; 
 	        } 
 	           var _record=sm.getSelected(); 
 	           if(_record.data.birthday.length>=10) 
 	                 _record.data.birthday=_record.data.birthday.substring(0,10); 
 	                  
 	           this._updateWin._form.getForm().loadRecord(_record); 
 	           
                this._updateWin.show(); 
     }, 
     deleteFn:function(){ 
            
     }, 
     searchFn:function(){ 
           
     } 
  
 }); 
  
 /******************************************* 
 *增加人员和修改人员时所用到的Form,继承自Ext.form.FormPanel 
 * 
 * 
 ****************************************/ 
 StudentFormPanel=Ext.extend(Ext.form.FormPanel,{ 
    constructor:function(){ 
      
       StudentFormPanel.superclass.constructor.call(this,{ 
          width:340, 
          frame:true, 
          plain:true, 
          layout:"form", 
           
          labelWidth:60, 
          labelAlign:'right', 
          items:[ 
            { xtype:"hidden", 
                fieldLabel:"id", 
                id:"sid", 
                value:"", 
                width:200}, 
             { 
             xtype:"textfield", 
              fieldLabel:"姓  名", 
              vtype:"LengthLimit", 
              id:"sname", 
              value:"", 
              width:200 
              }, 
              { 
               xtype:"datefield", 
               fieldLabel:"生 日", 
               id:"birthday", 
               width:200, 
               format:"Y-m-d", 
               editable:false, 
               value:new Date() 
              }, 
              { 
              xtype:"textfield", 
              fieldLabel:"所在城市", 
              id:"city", 
              width:200, 
              value:"" 
              }, 
              { 
              xtype:"textfield", 
              fieldLabel:"身 高", 
              id:"stature", 
              width:200, 
              vtype:"IntLimit", 
              value:"" 
              } 
          ] 
        
        
       }); 
    } 
  
 }); 
  
  
 /************************************* 
 *增加用户是的弹出窗口，继承自Ext.Window 
 * 
 **************************************/ 
 AddNewStudentWindow=Ext.extend(Ext.Window,{ 
     _form:null, 
    constructor:function(){ 
       
       this._form=new StudentFormPanel();//这里新建了FormPanel 
       AddNewStudentWindow.superclass.constructor.call(this,{ 
        
          title:"增加用户", 
          width:350, 
          frame:true, 
          plain:true, 
          closeAction:"hide", 
          autoDestroy:true, 
          
          [color=#FF0000]items:[this._form],[/color] 
          modal:true, 
          buttons:[ 
           {text:"保存", 
            iconCls:"sure", 
            handler:this.sureFn, 
            scope:this}, 
            {text:"重置", 
            iconCls:"reset", 
            handler:this.resetFn, 
            scope:this}, 
            {text:"关闭", 
            iconCls:"close", 
            handler:this.closeFn, 
            scope:this} 
          ] 
       }); 
        
    }, 
    sureFn:function(){ 
     
    }, 
    resetFn:function(){ 
      
     
    }, 
    closeFn:function(){ 
     this.hide(); 
    } 
  
  
 }); 
  
 /***************************** 
 *更新用户时调用的窗口 
 * 
 ******************************/ 
  
  
 UpdateStudentWindow=Ext.extend(Ext.Window,{ 
     _form:null, 
    constructor:function(){ 
       
       this._form=new StudentFormPanel();//新建FormPanel 
       UpdateStudentWindow.superclass.constructor.call(this,{ 
        
          title:"修改用户", 
          width:350, 
          frame:true, 
          plain:true, 
          closeAction:"hide", 
          autoDestroy:true, 
          
          [color=#FF0000]items:[this._form],[/color]          
          modal:true, 
          buttons:[ 
           {text:"保存", 
            iconCls:"sure", 
            handler:this.sureFn, 
            scope:this}, 
            {text:"重置", 
            iconCls:"reset", 
            handler:this.resetFn, 
            scope:this}, 
            {text:"关闭", 
            iconCls:"close", 
            handler:this.closeFn, 
            scope:this} 
          ] 
       }); 
        
    }, 
    sureFn:function(){ 
         }, 
    resetFn:function(){ 
     
    }, 
    closeFn:function(){ 
     this.hide(); 
    } 
  
  
 });