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:[
{
text:"增加电影",
icon:"image/table_add.png",
cls:"x-btn-txt-icon",
handler:function(){
//创建值
editGrid.getStore().insert(0,movieRec);
//初始编缉
editGrid.startEditing(0,0);
}
},{
text:"增加电影(后面)",
icon:"image/table_add.png",
cls:"x-btn-txt-icon",
handler:function(){
editGrid.getStore().insert(editGrid.getStore().getCount(),movieRec);
editGrid.startEditing(editGrid.getStore().getCount() -1,0);
}
},{
text:"删除电影",
icon:"table_delete.png",
cls:"x-btn-txt-icon",
handler:function(){
var sm = editGrid.getSelectionModel();
var sl = sm.getSelected();
if(sm.hasSelection()){
Ext.Msg.show({
title:"do you want to delete",
buttons:Ext.Msg.YESNOCANCEL,
msg:"你要删除" + sl.get("title") + "数据吗?",
fn:function(btn){
if(btn == "yes"){
editGrid.getStore().remove(sl);
}
}
});
}
}
}
],
bbar:[{
text:"增加电影(Server)",
handler:function(){
testGrid.insertFromServer(editGrid);
}
},{
text:"删除电影(Server)",
handler:function(){
var sm = editGrid.getSelectionModel();
var sel = sm.getSelected();
if(sm.hasSelection()){
Ext.Msg.show({
title:"do you want to delete",
buttons:Ext.Msg.YESNOCANCEL,
msg:"你要删除" + sel.get("title") + "数据吗?",
fn:function(btn){
if(btn == "yes"){
testGrid.deleteFromServer(editGrid,sel);
}
}
});
}
}
}
]
});
});
var movieRecord = new Ext.data.Record.create([{
name:"image",
type:"string"
},{
name:"id",
type:"string"
},{
name:"title",
type:"string"
},{
name:"director",
type:"string"
},{
name:"name",
type:"string"
},{
name:"genre",
type:"int"
},{
name:"tagline",
type:"string"
},{
name:"price",
type:"int"
},{
name:"available",
type:"int"
}
]);
//定义类型
var movieRec = new movieRecord({
title:"test",
director:"12",
genre:"1"
});
var testGrid = function(){
var _conn = new Ext.data.Connection();
var _url = "../saleInfo.do?method=operateMovieInfo";
return {
updateFromServer:function(e){
_conn.request({
url: _url,
params:{
action:"update",
id:e.record.id,
field:e.field,
value:e.value
},
success:function(){
e.record.commit();
},
failure:function(){
e.record.reject();
}
});
},
deleteFromServer:function(grid,sel){
_conn.request({
url:_url,
params:{
action:"delete",
id:sel.get("id")
},
success:function(){
grid.getStore().remove(sel)
},
failure:function(resp,opt){
Ext.Msg.alert("更新提示","更新数据" + e.record.id + "失败!");
}
});
},
insertFromServer:function(grid){
_conn.request({
url:_url,
params:{
action:"insert",
title:"test"
},
success:function(){
grid.getStore().insert(0,movieRec);
grid.startEditing(0,0);
},
failure:function(){
Ext.Msg.alert("保存提示","保存数据失败!")
}
});
}
}
}();
