Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法 ext gridpanel 滚动条

<HTML>

<HEAD>

<TITLE>可编辑表格面板EditorGridPanel</TITLE>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">

<linkrel="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';

//创建表格数据

vardata=[

[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值为字段值对应数组中数据的索引位置

varPerson=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}

]);

vardataStore=newExt.data.Store({//配置数据集

reader:newExt.data.ArrayReader({id:0},Person),

data:data

});

//创建Grid表格组件

vargrid=newExt.grid.EditorGridPanel({

title:'Ext.grid.EditorGridPanel',

applyTo:'grid-div',

width:430,

height:280,

frame:true,

clicksToEdit:2,

store:dataStore,

//方式一:对所有修改结果集中式提交

tbar:[{

text:'提交修改',
Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法 ext gridpanel 滚动条

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>

<BODYmce_>

<divid='grid-div'></div>

</BODY>

</HTML>

注:此例基本代码参考《ExtJS web应用程序开发指南》中代码17-7

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/51106.html

更多阅读

莲子的作用及食用方法 石榴的功效与作用

莲子性味甘平,每500克莲子中含有热量1500大卡左右,莲子的功效主要有:化痰止咳,降血压血脂,还可以壮阳,补脑安神之功效。莲子的作用及食用方法——莲子的功效性平、味甘涩,入心、脾、肾经;补脾止泻,益肾涩清,养心安神。用于脾虚久泻,遗精带下,心

打嗝的原因及治疗方法 呃逆的原因及治疗方法

打嗝的原因及治疗方法——简介为什么会打嗝呢?在我们的胸腔和腹腔之间,有一个像帽子似的厚厚肌肉膜,称为膈肌,将胸腔和腹腔分隔开。和身体其他器官一样,膈肌也有神经分布和血液供应。当引起打嗝的诱因刺激传导给大脑以后,大脑就会发出指

磁悬浮地球仪的原理及制作方法 磁悬浮摆件批发

磁悬浮地球仪的原理及制作方法——简介磁悬浮地球仪是指在无任何支撑以及无任何悬挂的情况下,将地球仪悬空漂浮在空中并自转的一种状态。其新奇独特的视觉表现效果,集科技与趣味于一体,具有很高的观赏性及实用性,深受办公商务人士的喜欢

大人尿床的原因及调理方法 大人尿床是什么原因女

现实生活中,大人尿床的机率并不小,只是很多人都难以启齿。今天来和大家分析一下大人尿床的原因及治疗方法。希望对大家有帮助。也希望能帮助有这个情况的朋友早日好起来,不用再为为苦恼。引起尿床的原因较多,通过我们的大量研究表明,

慢跑的好处及正确方法帮助 慢跑的正确方法

慢跑,对于保持良好的心脏功能,防止肺组_织弹性衰退,消耗热量、增强肌肉与肌耐力、增进心肺功能、排_毒,具有积极的作用。同时也必须关注慢跑姿_势与呼吸法的一些细节。慢跑的好处及正确方法帮助——慢跑好处 慢跑的好处及正确方法帮助 1

声明:《Ext.grid.EditorGridPanel的使用、修改记录的获取及提交方法 ext gridpanel 滚动条》为网友昜婧分享!如侵犯到您的合法权益请联系我们删除