日期:2014-05-16 浏览次数:20472 次
Ext.onReady(function(){
//使用EditGrid
// 1.开始使用使用editGrid
// 1>把原来的Ext.grid.gridPanel修改成Ext.grid.editorGridPanel
// 2>在grid中增加clicksToEdit参数,使其可编缉,不指定则默认为2.双击两次
// 3>定义form域中的组件进行编缉,如TextField
// 4>在grid的columns中定义上步定义好的form域的组件.
// 2.编缉更多的类型
// 1>时间 DateField
// 2>下拉框 ComboBox
// 3.脏数据的处理方法
// 1>使用afterEdit方法中参数 e.对于e的参数可以是field,value,grid,row,orignalValue,record,column
// 2>使用e.record.commit()和e.record.reject()分别用来提交和拒绝数据,提交后把数据写入缓存中.
// 4.缓存中数据的增加,修除方法.
// 1>增加数据,定义数据类型 record.create定义数据类型,grid.getStore().insert增加数据,grid.startEidt开如编缉处
// 2>删除数据 grid.getStore().remove(sl)删除选中数据
// 5.服务端操作数据
// 1>对数据的增加,删除,修改操作,都可以用new Ext.data.Connection(); 类来与后台数据交互
// 2>与前台操作数据相同,不同的只是在操作时,把后台要操作的数据传到后台数据操作.
// 3>返回success,与failture对成功与失败返回操作
//定义数据库
var store = new Ext.data.Store({
//定义数据 data
data:[[
"de.png",
1,
"Office Space",
"Mike Judge",
"1999-02-19",
1,
"Work Sucks",
"19.95",
1
],[
"us.png",
3,
"Super Troopers",
"Jay Chandrasekhar",
"2002-02-15",
2,
"Altered State Police",
"14.95",
2
]
],
reader:new Ext.data.ArrayReader({
id:"id"
},[
'image',
'id',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
'price',
'available'
]
)
});
//定义form中组件,设置导演,标题,说明
var txtDirector = new Ext.form.TextField();
var txtTitle = new Ext.form.TextField();
var txtTagLine = new Ext.form.TextField({maxLength:45});
//发布日期
var dtReleased = new Ext.form.DateField({format:"m/d/y"});
//下拉框类型
var localData = [["1","喜剧"],["2","歌剧"],["3","动作片"]];
var localStore = new Ext.data.SimpleStore({
data:localData,
fields:["id","type"]
});
//类型
var cbGenre = new Ext.form.ComboBox({
store:localStore,
typeAhead:true,
mode:"local",
displayField:'type',
valueField:"id",
triggerAction:"all"
});
//定义数据类型
// 'image',
// 'id',
// 'title',
// 'director',
// {name: 'released', type: 'date', dateFormat: 'Y-m-d'},
// 'genre',
// 'tagline',
// 'price',
// 'available'
//定义编缉器
var editGrid = new Ext.grid.EditorGridPanel({
title:"电影编缉",
frame:true,
width:600,
height:400,
renderTo:document.body,
clickstoEdit:2,
store:store,
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
columns:[{
header:"title",
dataIndex:"title",
editor:txtTitle
},{
header:"director",
dataIndex:"director",
editor:txtDirector
},{
header:"released",
dataIndex:"released",
renderer:Ext.util.Format.dateRenderer("m/d/y"),
editor:dtReleased
},{
header:"genre",
dataIndex:"genre",
renderer:function(val){
return localStore.queryBy(function(rec){
return rec.get("id") == val
},this).itemAt(0).get("type");
},
editor:cbGenre
},{
header:"tagline",
dataIndex:"tagline",
editor:txtTagLine
}
],
listeners:{
afterEdit:function(e){
//e.field && e.value 取当前的值
if(e.field == "director" && e.value == "refurbish"){
Ext.Msg.alert("refurbish is fobidden","被禁止");
e.record.reject();
}else{
//e.record.commit();
}
//edit grid on server
testGrid.updateFromServer(e);
}
},
tbar:[