duansky'weblog

统计

留言簿(3)

友情链接

阅读排行榜

评论排行榜

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

  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>可编辑表格面板EditorGridPanel</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" mce_href="extjs2.0/resources/css/ext-all.css" />  
  6.   <mce:script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js" mce_src="extjs2.0/adapter/ext/ext-base.js"></mce:script>  
  7.   <mce:script type="text/javascript" src="extjs2.0/ext-all.js" mce_src="extjs2.0/ext-all.js"></mce:script>  
  8.   <mce:script type="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>  
  9.   <mce:script type="text/javascript"><!--  
  10.  Ext.onReady(function(){  
  11.   Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';  
  12.   Ext.QuickTips.init();  
  13.   Ext.form.Field.prototype.msgTarget = 'qtip';  
  14.   //创建表格数据  
  15.   var data = [  
  16.    [1,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],  
  17.    [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],  
  18.    [3,'王五','男',new Date(1981,01,01),27,'wang@abc.com']  
  19.   ];  
  20.   //创建记录类型Person，mapping值为字段值对应数组中数据的索引位置  
  21.   var Person = Ext.data.Record.create([  
  22.    {name: 'personId',mapping: 0},  
  23.    {name: 'personName',mapping: 1},  
  24.    {name: 'personSex',mapping: 2},  
  25.    {name: 'personBirthday',mapping: 3},  
  26.    {name: 'personAge',mapping: 4},  
  27.    {name: 'personEmail',mapping: 5}  
  28.   ]);  
  29.   var dataStore=new Ext.data.Store({//配置数据集  
  30.     reader: new Ext.data.ArrayReader({id:0},Person),  
  31.     data: data  
  32.    });  
  33.   //创建Grid表格组件  
  34.   var grid = new Ext.grid.EditorGridPanel({  
  35.    title : 'Ext.grid.EditorGridPanel',  
  36.    applyTo : 'grid-div',  
  37.    width:430,  
  38.    height:280,  
  39.    frame:true,  
  40.    clicksToEdit:2,  
  41.    store: dataStore,  
  42.    //方式一：对所有修改结果集中式提交  
  43.    tbar:[{  
  44.     text:'提交修改',  
  45.     handler:function(){  
  46.      var mr=dataStore.getModifiedRecords();//获取所有更新过的记录  
  47.      var recordCount=dataStore.getCount();//获取数据集中记录的数量  
  48.      if(mr.length==0){  // 确认修改记录数量  
  49.        alert("没有修改数据！");  
  50.        return false;  
  51.      }  
  52.        
  53.      var recordModStr="[";//这里以josn方式保存  
  54.      for(var i=0;i<mr.length;i++){  
  55.       alert("orginValue:"mr[i].modified["personEmail"]+",value:"+mr[i].data["personSex"]);//此处cell是否发生  
  56.                                              //更改可用mr[i].dirty来判断  
  57.       recordModStr+="{personName:"+mr[i].data["personName"]+",personSex:"+mr[i].data["personSex"]+",personBirthday:"  
  58.            +mr[i].data["personBirthday"]+",personAge:"+mr[i].data["personAge"]+",personEmail:"+mr[i].data["personEmail"]+"}";  
  59.        if(i<mr.length-1)  
  60.                 recordModStr+=",";  
  61.      }  
  62.      recordModStr+="]";  
  63.      alert(recordModStr);  
  64.      //向后台提交请求 Ext.Ajax.request(requestCofig);//将recordModStr传入  
  65.    }  
  66.    }],  
  67.    columns: [//配置表格列  
  68.     {header: "id", width: 40, dataIndex: 'personId'},  
  69.     {header: "姓名", width: 70, dataIndex: 'personName',  
  70.      editor:new Ext.form.TextField({  
  71.       allowBlank : false  
  72.      })  
  73.     },  
  74.     {header: "性别", width: 40, dataIndex: 'personSex',  
  75.      editor:new Ext.form.ComboBox({  
  76.       editable : false,  
  77.       displayField:'sex',  
  78.       mode: 'local',  
  79.       triggerAction: 'all',  
  80.       store:new Ext.data.SimpleStore({  
  81.        fields: ['sex'],  
  82.        data : [['男'],['女']]  
  83.       })  
  84.      })  
  85.     },  
  86.     {header: "生日", width: 100, dataIndex: 'personBirthday',  
  87.      editor:new Ext.form.DateField(),  
  88.      renderer:Ext.util.Format.dateRenderer('Y年m月d日')  
  89.     },  
  90.     {header: "年龄", width: 40, dataIndex: 'personAge',  
  91.      editor:new Ext.form.NumberField(),renderer:isEdit  
  92.     },  
  93.     {header: "电子邮件", width: 120, dataIndex: 'personEmail',  
  94.      editor:new Ext.form.TextField({  
  95.       vtype:'email'  
  96.      })  
  97.     }  
  98.    ]  
  99.   })  
  100.   //方式二：对修改结果实时提交，这里对年龄实时提交  
  101.   function isEdit(value,record){  
  102.     //向后台提交请求  
  103.    return value;  
  104.   }  
  105. function  afterEdit(obj){     //每次更改后，触发一次该事件   
  106.           alert("orginalValue:"+obj.originalValue+",value:"+obj.value);  
  107.       }  
  108.      grid.on("afteredit", afterEdit, grid);  
  109.  });  
  110.     
  111. // --></mce:script>   
  112.  </HEAD>  
  113.  <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;">  
  114.  <div id='grid-div'></div>  
  115.  </BODY>  
  116. </HTML>  



转自: http://blog.csdn.net/gaoyusi4964238/archive/2009/07/25/4378498.aspx

posted on 2010-09-09 17:31 duansky 阅读(2813) 评论(1)  编辑  收藏 所属分类: Ext

评论

# re: Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法[未登录] 2011-09-02 16:22 a

帅个毛  回复  更多评论   


只有注册用户登录后才能发表评论。
网站导航: