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

kidiaoer

浏览: 824789 次
性别:
来自: 深圳

最近访客更多访客>>

nandyweb

lehmann_ding

dniahf

wxn_yxm

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT prototype

<HTML>
<HEAD>
<TITLE>可编辑表格面板EditorGridPanel</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs2.0/ext-all.js"></script>
<script type="text/javascript" src="extjs2.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="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,'张三','男',new Date(1979,09,13),29,'zhang@abc.com'],
   [2,'李四','女',new Date(1978,10,01),30,'li@abc.com'],
   [3,'王五','男',new Date(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=new Ext.data.Store({//配置数据集
    reader: new Ext.data.ArrayReader({id:0},Person),
    data: data
   });
//创建Grid表格组件
var grid = new Ext.grid.EditorGridPanel({
   title : 'Ext.grid.EditorGridPanel',
   applyTo : 'grid-div',
   width:430,
   height:280,
   frame:true,
   clicksToEdit:2,
   store: dataStore,
   //方式一：对所有修改结果集中式提交
   tbar:[{
    text:'提交修改',
    handler:function(){
     var mr=dataStore.getModifiedRecords();//获取所有更新过的记录
     var recordCount=dataStore.getCount();//获取数据集中记录的数量
     if(mr.length==0){ // 确认修改记录数量
       alert("没有修改数据！");
       return false;
     }

     var recordModStr="[";//这里以josn方式保存
     for(var i=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:new Ext.form.TextField({
      allowBlank : false
     })
    },
    {header: "性别", width: 40, dataIndex: 'personSex',
     editor:new Ext.form.ComboBox({
      editable : false,
      displayField:'sex',
      mode: 'local',
      triggerAction: 'all',
      store:new Ext.data.SimpleStore({
       fields: ['sex'],
       data : [['男'],['女']]
      })
     })
    },
    {header: "生日", width: 100, dataIndex: 'personBirthday',
     editor:new Ext.form.DateField(),
     renderer:Ext.util.Format.dateRenderer('Y年m月d日')
    },
    {header: "年龄", width: 40, dataIndex: 'personAge',
     editor:new Ext.form.NumberField(),renderer:isEdit
    },
    {header: "电子邮件", width: 120, dataIndex: 'personEmail',
     editor:new Ext.form.TextField({
      vtype:'email'
     })
    }
   ]
})
//方式二：对修改结果实时提交，这里对年龄实时提交
function isEdit(value,record){
    //向后台提交请求
   return value;
}

function afterEdit(obj){    //每次更改后，触发一次该事件
          alert("orginalValue:"+obj.originalValue+",value:"+obj.value);
      }
     grid.on("afteredit", afterEdit, grid);
});
</script>
</HEAD>
<BODY style="margin=10 10 10 10;">
<div id='grid-div'></div>
</BODY>
</HTML>

分享到：

xt中combobox在grid显示问题 | 在Ext中EditorGrid中datefield输入问题解 ...

2010-08-19 20:27
浏览 1820
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论