ExtJs--EditorGrid可编辑的表格控件 extjs4 grid editor

可编辑表格控件:

------------------------------------------------------------------

ExtJs--EditorGrid可编辑的表格控件 extjs4 grid editor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../../ext-all.js"></script>

<script type="text/javascript" src="../Adapter.js"></script>

<script type="text/javascript">

//可编辑表格控件EditorGrid

//制作一个可编辑表格

//添加一行

//删除一行

//保存修改结果

//验证editorGrid中的数据

//限制输入数据的类型

Ext.onReady(function(){

var data=[

[1,1,new Date(),true],

[2,2,new Date(),false],

[3,2,new Date(),false],

[4,0,new Date(),true]

];

//选择列

var comboData=[

['0','新版ext教程'],

['1','ext在线支持'],

['2','ext扩展']

];

var comboStore=new Ext.data.SimpleStore({

data:comboData,

fields:['value','text']

});

var comboBox=new Ext.form.ComboBox({

store:comboStore,

triggerAction:'all',

displayField:'text',

valueField:'value',

mode:'local',

//readOnly:true,

emptyText:'请选择'

});

//注意:每一列都多加了一个editor属性

//第一列:数字

//第二列:选择列

//第三列:时间列

//第四列:判断列

var cm=new Ext.grid.ColumnModel([

{

header:'数字列',

dataIndex:'number',

editor:new Ext.grid.GridEditor(new Ext.form.NumberField({

allowBlank:false,

allowNegative:false,

maxValue:10

}))

},{

//如果comboBox无法正常显示,考虑是不是没有写渲染函数.当没写这个函数时,显示的数据时value值,而不是text.

//bijing EditorGrid里的编辑器在实际编辑时起作用,表格与editor之间共享的是数据,显示层都要依靠各自的实现.不过,这样做

//更灵活,不需要两者都使用一样的显示方式

header:'选择列',

dataIndex:'comboBox',

editor:new Ext.grid.GridEditor(comboBox),

renderer:function(value){

return comboData[value][1];

}

},{

header:'日期列',

dataIndex:'date',

editor:new Ext.grid.GridEditor(new Ext.form.DateField({

format:'Y-m-d',

minValue:'2007-12-14',

disabledDays:[0,6],

allowBlank:false,

disabledDaysText:'只能选择工作日...'

})),

renderer:function(value){

return value.format('Y-m-d');

}

},{

header:'判断列',

dataIndex:'check',

editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({

allowBlank:false

})),

renderer:function(value){//什么叫渲染,就是显示的时候,如何显示,这里面现实的时候,就是显示是和否

return value?'是':'否';

}

}

]);

var store=new Ext.data.Store({

proxy:new Ext.data.MemoryProxy(data),

reader:new Ext.data.ArrayReader({},[

{name:'number'},

{name:'comboBox'},

{name:'date'},

{name:'check'}

]),

pruneModifiedRecords:true//如果为true,每次进行remove和load操作时,store会自动清除modified标记.可以避免出现下次提交时还会把上次那些modified信息都带上的现象

});

store.load();

//这里定义一个MyRecord类

var MyRecord=new Ext.data.Record.create([

{name:'number',type:'string'},

{name:'comboBox',type:'string'},

{name:'date',type:'string'},

{name:'check',type:'string'}

]);

btn_add=function(){

//单击添加按钮,添加一个空行(首先新建一个MyRecord,记得给里面的属性赋值,否则EditorGrid最后显示的内容会混乱)

var p=new MyRecord({

number:'',

comboBox:'',

date:'',

check:''

});

grid.stopEditing();//关闭表格的编辑状态

store.insert(0,p);//把我们刚才创建的MyRecord放到表格的第一行

grid.startEditing(0,0);//激活第一行第一列的编辑状态

}

btn_delete=function(){

Ext.Msg.confirm('提示','确定要删除?',function(btn){

if(btn=='yes'){

var sm=grid.getSelectionModel();//获取表格的选择模型

var cell=sm.getSelectedCell();//从选择模型中获取选中的单元格,这个单元格有两个属性,一个是行号,一个是列号

var record=store.getAt(cell[0]);//通过行号得到store这一行对应的Record,然后移除即可

store.remove(record);

}

});

}

btn_save=function(){

//简单介绍slice(start,[end])方法,该方法返回一个新数组,包含了源函数从start到end所指定的元素,但不包括end元素.如果start为负,

//则将它作为length+start处理,length为数组长度,如果end为负,则将它作end+length处理,如果end在start之前,不做任何复制.

//store.modified.slice(0)作用就是复制store.modified,保证store.modified中的原始数据不受影响.

var m=store.modified.slice(0);//获取store中修改过的数据,放到jsonArra数组中

var jsonArray=[];

<!--把这些数据组装成简单的数组.两种方发:第一种.因为数组m里保存的是Record,而不是简单的对象,只需要去除Record的data属性即可,

//然后使用循环将data添加到数组中 第二种.使用each()函数.each()的作用是遍历array,并对每项分别调用fn函数,如果array不是数组,

//则只执行一次.如果某项调用fn后结果返回false,那么遍历将结束并退出.

-->

Ext.each(m,function(item){

jsonArray.push(item.data);

})

Ext.Ajax.request({

url:'../success.jsp',

success:function(response,opt){

var obj= Ext.decode(response.responseText);

Ext.Msg.alert("成功", obj.msg);

},

failure:function(){

Ext.Msg.alert("失败","提交失败");

},

params:{

data:encodeURIComponent(Ext.encode(jsonArray))

}

});

}

//这里不是GridPanel,而是EditorGridPanel

var grid=new Ext.grid.EditorGridPanel({

cm:cm,

store:store,

autoHeight:true,

renderTo:'grid',

tbar:[{

xtype:'buttongroup',

defaults:{

scale:'small'

},

layoutConfig:{

columns:5

},

items:[

{

xtype:'button',

text:'添加一行',

handler:btn_add

},{

xtype:'button',

text:'删除一行',

handler:btn_delete

} ,{

xtype:'button',

text:'保存',

handler:btn_save

}

]

}

]

});

});

</script>

</head>

<body>

<div id="grid"></div>

</body>

</html>

--------------------------------------------------------------------------







  

爱华网本文地址 » http://www.aihuau.com/a/25101011/54902.html

更多阅读

Activex控件无法安装解决办法 mac无法启动解决办法

Activex控件无法安装解决办法——简介今天我的Activex控件无法安装我把我的解决的办法给大家分享下。Activex控件无法安装解决办法——工具/原料电脑救援Activex控件无法安装解决办法——方法/步骤Activex控件无法安装解决办法 1

怎样使用C#的月历MonthCalendar 控件 c panel控件的使用

怎样使用C#的月历【MonthCalendar】控件——简介 C#中的日历控件【MonthCalendar】是比较常用的一个控件,可以让用户对日期进行快速的查看和设置、也可以选择一段所需要的日期时间段。 下面介绍一下几种日历控件常用的使用方法。怎

7款实用的商用图表控件 郑凤如实用图表

最近,有个朋友叫我给他推荐一款比较好的图表控件,在我看来,好的图表控件很多,但是好的并不一定适合,只有符合自己需求的才是最好的!这里,我也为大家选了几款目前比较流行的7款图表控件,大家可以根据自己的需求进行自由选择!1、IocompIocom

OCX控件注册 win7 ocx控件注册

OCX控件注册方法一:在DOS或Windows命令行下运行 regsvr32 ocxname.OCX注册,其中ocxname.OCX为activex控件文件名。使用过activex的人都知道,activex不注册是不能够被系统识别和使用的,一般安装程序都会自动地把它所使用的activex控件

声明:《ExtJs--EditorGrid可编辑的表格控件 extjs4 grid editor》为网友浪完也别回头分享!如侵犯到您的合法权益请联系我们删除