Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.QuickTips.init();
var genres = new Ext.data.SimpleStore({
fields: ['id', 'genre'],
data : [['1','Comedy'],['2','Drama'],['3','Action']]
});
function genre_name(val){
return genres.queryBy(function(rec){
return rec.data.id == val;
}).itemAt(0).data.genre;
}
function title_img(val, x, store){
return '<img src="images/'+store.data.coverthumb+'" width="50" height="68" align="left">'+
'<b style="font-size: 13px;">'+val+'</b><br>'+
'Director:<i> '+store.data.director+'</i><br>'+
store.data.tagline;
}
var store = new Ext.data.Store({
url: 'movies.json',
reader: new Ext.data.JsonReader({
root:'rows',
id:'id'
}, [
'id',
'coverthumb',
'title',
'director',
{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
'genre',
'tagline',
{name: 'price', type: 'float'},
{name: 'available', type: 'bool'}
]),
pruneModifiedRecords:true
});
store.load();
var title_edit=new Ext.form.TextField();
var director_edit=new Ext.form.TextField();
var tagline_edit=new Ext.form.TextField({
maxLength:45
});
var release_edit=new Ext.form.DateField({
format:"m/d/Y"
});
var genre_edit=new Ext.form.ComboBox({
typeAhead:true,
triggerAction:"all",
mode:"local",
store:genres,
displayField:'genre',
valueField:"id"
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
stripeRows:true,
frame:true,
title: 'Movie Database',
height:600,
width:850,
store: store,
clicksToEdit:1,
autoExpandColumn: 'title',
sm:new Ext.grid.RowSelectionModel({
singleSelect:true
}),
columns: [
{header: "Title", dataIndex: 'title', renderer: title_img, id: 'title', sortable: true,editor:title_edit},
{header: "Director", dataIndex: 'director', hidden: false,editor:director_edit},
{header: "Released", dataIndex: 'released', sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),editor:release_edit},
{header: "Genre", dataIndex: 'genre', renderer: genre_name, sortable: true,editor:genre_edit},
{header: "Tagline", dataIndex: 'tagline', hidden: false,editor:tagline_edit},
{header: "Price", dataIndex: 'price', renderer: 'usMoney', sortable: true,id:"price"},
{header:"available",dataIndex:"available"}
],
listeners:{
afteredit:function(e){
if(e.field == "director" && e.value =="Mel Gibson"){
Ext.Msg.alert("Eror","Mel Gibson movies not allowed");
e.record.reject(); //拒绝修改
}else{
// e.record.commit(); //提交修改
}
}
},
/*
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
"rowselect":function(sm,index,record){
Ext.Msg.alert("You Selected",record.data.title);
}
}
}),*/
tbar:[{
text:"Remove Movie",
icon:"images/table_delete.png",
cls:"x-btn-text-icon",
handler:function(btn,e){
var sm=grid.getSelectionModel();
var sel=sm.getSelected();
if(sm.hasSelection()){
Ext.Msg.show({
title:"Remove Movie",
buttons:Ext.MessageBox.YESNOCANCEL,
msg:'Remove '+sel.data.title+'?',
fn:function(btn){
if(btn=="yes"){
grid.getStore().remove(sel);
}
}
});
}
}
}]
});
});