首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

关于Ext中重复加载的有关问题

2013-03-16 
关于Ext中重复加载的问题!http://photo.renren.com/photo/sp/henB19UKMGM 写了Ext的demo,增加用户和修改用

关于Ext中重复加载的问题!

  http://photo.renren.com/photo/sp/henB19UKMGM
 关于Ext中重复加载的有关问题
写了Ext的demo,增加用户和修改用户用的是同一个FormPanel,
但是当我先点一下新增用户并关闭后,再打开修改用户的界面时,修改用户里面的Formpanel就会出现两边,反之也一样!下面是js代码,不知道是FormPanel继承的问题,还是Window定义的问题,求高手帮看看!谢谢!
   我是看的陈治文的视频教程学的Ext,有个地方还不是很了解就是   类名.superclass.constructor.call(this,{}),这一句是什么意思呢,麻烦也帮忙解释一下,谢谢!



   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,
        
         items:[this._form],
         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,
        
         

items:[this._form],         
         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();
   }



});



[解决办法]

Test.superclass.constructor.call(this,{name: 'king'})
这样Test中就有了一个name的属性了,值是king;其实你没有必要一定要搞懂具体的含义。目前你只需要
它是这样用的,当成语法来用就可以了。等你的知识累计到一定程度自然就知道了。
你的问题描述得不够清晰

[解决办法]
图片被过滤了看不了
[解决办法]
如果还没解决   你站内短信联系我  我来帮你调调看
[解决办法]
我看了一下你的图片和代码。
出现的原因基本是这样(呵呵。我以前也遇到过)
首先添加和编辑共用一个窗体,而且是模式窗体,close时触发的hide时间,
你的textfield或其他的组建都用了id属性,当渲染html代码时。id属性是唯一的。因为你事hide窗体。html本来有了id为"name"的标签,当你在单击时就会重复id。
所有会出现2图中的情况
所有楼主可以把所有的form中id属性去掉。用name属性就可以了。
虽然Ext.getCmp("")简单,方便但要是有它的弊端的。
如果要获取form中的组件可以form.from.findField("name");

热点排行