Ext.grid.EditorGridPanel的使用、修改记录的获取及提交

来源:互联网 发布:淘宝首页怎么建热点 编辑:程序博客网 时间:2024/06/06 14:23
<HTML> 

 
 <HEAD>  
 <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  <metahttp-equiv="Content-Type" content="text/html;charset=utf-8">  
  <link rel="stylesheet"type="text/css" href="extjs2.0/resources/css/ext-all.css"mce_href="extjs2.0/resources/css/ext-all.css"/>  
  <mce:scripttype="text/javascript" src="extjs2.0/adapter/ext/ext-base.js"mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>  
  <mce:scripttype="text/javascript" src="extjs2.0/ext-all.js"mce_src="extjs2.0/ext-all.js"></mce:script>  
  <mce:scripttype="text/javascript"src="extjs2.0/source/locale/ext-lang-zh_CN.js"mce_src="extjs2.0/source/locale/ext-lang-zh_CN.js"></mce:script>  
  <mce:scripttype="text/javascript"><!--  
 Ext.onReady(function(){  
  Ext.BLANK_IMAGE_URL ='../../extjs2.0/resources/images/default/s.gif';  
 Ext.QuickTips.init();  
  Ext.form.Field.prototype.msgTarget ='qtip';  
 //创建表格数据  
  var data =[  
   [1,'张三','男',newDate(1979,09,13),29,'zhang@abc.com'],  
   [2,'李四','女',newDate(1978,10,01),30,'li@abc.com'],  
   [3,'王五','男',newDate(1981,01,01),27,'wang@abc.com']  
 ];  
 //创建记录类型Person,mapping值为字段值对应数组中数据的索引位置  
  var Person =Ext.data.Record.create([  
   {name:'personId',mapping:0},  
   {name:'personName',mapping:1},  
   {name:'personSex',mapping:2},  
   {name:'personBirthday',mapping:3},  
   {name:'personAge',mapping:4},  
   {name:'personEmail',mapping:5}  
 ]);  
  var dataStore=newExt.data.Store({//配置数据集  
   reader: newExt.data.ArrayReader({id:0},Person),  
   data: data  
  });  
 //创建Grid表格组件  
  var grid = newExt.grid.EditorGridPanel({  
   title :'Ext.grid.EditorGridPanel',  
   applyTo :'grid-div',  
  width:430,  
  height:280,  
  frame:true,  
  clicksToEdit:2,  
   store:dataStore,  
  //方式一:对所有修改结果集中式提交  
  tbar:[{  
   text:'提交修改',  
   handler:function(){  
    varmr=dataStore.getModifiedRecords();//获取所有更新过的记录  
    varrecordCount=dataStore.getCount();//获取数据集中记录的数量  
    if(mr.length==0){  //确认修改记录数量  
      alert("没有修改数据!");  
      returnfalse;  
     
       
    varrecordModStr="[";//这里以josn方式保存  
    for(vari=0;i<mr.length;i++){  
     alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生  
                                            //更改可用mr[i].dirty来判断  
     recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:" 
          +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";  
      if(i<mr.length-1)  
               recordModStr+=",";  
     
    recordModStr+="]";  
    alert(recordModStr);  
    //向后台提交请求Ext.Ajax.request(requestCofig);//将recordModStr传入  
   
  }],  
   columns:[//配置表格列  
   {header: "id", width: 40, dataIndex:'personId'},  
   {header: "姓名", width: 70, dataIndex:'personName',  
    editor:newExt.form.TextField({  
     allowBlank : false 
    })  
   },  
   {header: "性别", width: 40, dataIndex:'personSex',  
    editor:newExt.form.ComboBox({  
     editable :false,  
     displayField:'sex',  
     mode:'local',  
     triggerAction:'all',  
     store:newExt.data.SimpleStore({  
      fields:['sex'],  
      data :[['男'],['女']]  
     })  
    })  
   },  
   {header: "生日", width: 100, dataIndex:'personBirthday',  
    editor:newExt.form.DateField(),  
    renderer:Ext.util.Format.dateRenderer('Y年m月d日')  
   },  
   {header: "年龄", width: 40, dataIndex:'personAge',  
    editor:newExt.form.NumberField(),renderer:isEdit  
   },  
   {header: "电子邮件", width: 120, dataIndex:'personEmail',  
    editor:newExt.form.TextField({  
     vtype:'email' 
    })  
    
   
 })  
 //方式二:对修改结果实时提交,这里对年龄实时提交  
  functionisEdit(value,record){  
   //向后台提交请求  
   returnvalue;  
  
functionafterEdit(obj){   //每次更改后,触发一次该事件  
         alert("orginalValue:"+obj.originalValue+",value:"+obj.value);  
      
    grid.on("afteredit", afterEdit,grid);  
 });  
    
//--></mce:script>  
 </HEAD>  
 <BODY style="margin=10 1010 10;" mce_style="margin=10 10 1010;">  
 <divid='grid-div'></div>  
 </BODY>  
</HTML>

原创粉丝点击