`
ghl116
  • 浏览: 165526 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

最近在写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(); 
    } 
  
  
 }); 
 
  • 大小: 42.6 KB
  • 大小: 47.7 KB
分享到:
评论

相关推荐

    Ext入门代码!!!!!!!!!!

    Ext的入门示例代码!!!!!!!!!!!!!!!!!!!!

    Ext的gridpanel控件二次加载问题

    在Ext JS这个强大的JavaScript框架中,GridPanel是一个非常重要的组件,用于展示数据表格。然而,在实际应用中,可能会遇到一个常见的问题:当GridPanel需要进行第二次加载时,数据或者功能可能会丢失。这个问题主要...

    Ext 添加功能form表单实例

    综上所述,这个实例展示了如何在Ext中创建一个完整的表单,包括表单的布局、字段的定义及验证、按钮及事件处理等多个方面。对于初学者来说,这是一个很好的学习资源,可以帮助他们快速掌握如何使用Ext构建复杂的Web...

    ext扩展 延时加载

    在IT行业中,"ext扩展 延时加载"是一个关于前端开发的重要概念,特别是对于使用Ext JS框架的应用程序。Ext JS是一个强大的JavaScript库,用于构建数据驱动的富客户端应用程序。延时加载(Lazy Loading)是一种优化...

    EXT.form组件

    1. `form`:`Ext.FormPanel`是EXT JS中的表单面板,它是一个容器,可以容纳各种表单字段和其他组件。表单面板允许你定义布局、提交行为以及处理表单数据的方法。 2. `checkbox`:`Ext.form.Checkbox`是用于创建复选...

    Ext Form全攻略

    Ext Form全攻略 Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略Ext Form全攻略

    Ext2.0 form使用实例的例程

    1. **表单(FormPanel)**:这是Ext 2.0中的核心表单组件,它是一个容器,可以包含各种表单字段和其他组件。FormPanel提供了数据提交、验证、加载和保存的功能。 2. **表单字段(Form Fields)**:包括文本字段...

    Ext4 动态加载js例子

    `Ext.Loader` 是 Ext4 中的一个核心特性,用于动态加载所需的 JavaScript 类库和模块,这在开发大型应用时尤其有用,因为它可以显著减少页面初次加载时的资源需求。 动态加载的核心在于按需加载,即只有在实际需要...

    Ext 动态加载表单数据

    在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...

    Ext.form表单中各种属性应用详解

    **Ext.form.DateField** 是一个日期选择器,继承自 **Ext.form.TriggerField**,专门用于日期的选择和输入。 - **altFormats**: 类型为 `String`,定义用于解析用户输入的其他日期格式,默认为 `'m/d/Y|m-d-y|m-d-Y...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    GXT2.0 EXT=GWT !!!!

    "揭示了一个关键信息,即GXT(Ext GWT)的版本2.0。这是一个基于Google Web Toolkit(GWT)的UI组件库,它允许开发者使用Java来构建富互联网应用程序(Rich Internet Applications,RIAs)。GXT提供了大量的可定制的...

    Ext下多tab的延迟加载问题.docx

    在ExtJS中,延迟加载(lazy loading)是一种优化技术,主要用于处理大量数据或组件时,避免一次性加载所有内容导致的性能问题。在多标签(tab)场景下,如果每个标签页都包含复杂的组件或需要进行大量的网络请求,...

    EXT异步提交FORM表单

    1. **初始化表单**:首先需要使用EXT创建一个表单对象,该对象将包含所有需要提交的字段。 ```javascript var form = new Ext.form.FormPanel({ id: 'myForm', url: 'yourActionUrl', method: 'POST', items...

    ext 异步加载树完整版

    "ext 异步加载树完整版" 提到的是EXT JS框架中的一个特性,EXT JS是一个广泛使用的JavaScript库,用于构建富客户端Web应用程序。在这个场景下,"异步加载树"是指树形组件(Tree Panel)不一次性加载所有节点,而是...

    EXT dojochina文本框示例Ext.form.TextField.rar

    在压缩包中的`Ext.form.TextField`文件夹,很可能是包含了一个或者多个HTML、JavaScript和CSS文件的示例项目,展示了如何在实际应用中使用`Ext.form.TextField`组件。这些文件通常会包含一个或者多个示例,演示了...

    EXT中文手册 Grid Form

    Grid组件是EXT中非常重要的一个组成部分,主要用于展示表格数据。它支持数据的排序、筛选、分页等功能,并且可以通过Ajax技术动态加载数据。 **Grid组件的简易分页** Grid支持内置分页功能,通过配置`store`属性,...

    Ext实例详解 超值!!

    "的资源中,你将找到一系列适合自学者和初学者的教程,帮助你深入理解和掌握ExtJS的基本概念和高级特性。 首先,让我们从基础开始。ExtJS的核心是组件模型,它允许开发者通过组合各种小部件来构建复杂的UI。`Ext....

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵资源,它演示了如何将这些组件结合起来,实现交互式的数据操作。 1. **树形控件(Tree)**:在左边展示数据结构,通常用于...

Global site tag (gtag.js) - Google Analytics