LearningExtJS_newのGRIDの応用学習(三)
11328 ワード
Ext.onReady(function(){
//1. store, store
//simpleStore,xmlStore,jsonStore
//2. GridPanel , :
// 1>renderTo , dom ID
// 2>frame true
// 3>width,height ,
// 4>store
// 5>columns ,columns renderer:fn. Ext.util.format :dateRenderer,uppercase,lowercase,capitalize
//renderer : ,cell ,store
// 6>stripeRows
// 3.
// 1> :{header: 'Tagline', dataIndex: 'tagline', sortable: true}
// 2> ， ： var firstCm = firstGrid.getColumnModel();firstCm.getColumnById(0).sortable = true;
// 4.
// 1> :{header: "Tagline", dataIndex: 'tagline', hidden: true}
// 2> , var firstCm = firstGrid.getColumnModel();firstCm.setHidden(firstCm.getIndexById("title"),true);
// 5.
// 1> gridpanel :enableColumnMove:true//
// 2> ， firstCm.on("columnMoved",function(cm,oindx,nindx)
// 6. store
// 1> xml ， xml ， xml/movie.xml ． store, url reader xmlReader, {record}, store load.
// 2>json ， json ， json/movie.json ． jsonStore, url fields,root, store load.
// 3> ， json ， jsonStore， ， json ．
// 7.
// 1> , getSelectionModel, selectionModel hasSelection(),getSelected(),
// 2>sel = sm.getSelected() set , sel.data.** .
// 8.
// 1> , getColumonModel(), getColumnById("ID");
// 2> cm.setHidde(column,true Or false) cm.isHidden();
// 9.
// 1> jsonStore ,store root, totlaProperty
// 2> gridPanel PagingToolbar, , start totalProperty
// 3> grid
// 10.
// 1> GroupingStore , sortInfo, groupField, reader
// 2> grid, groupView, . .
//
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'
]
)
});
//
var genreStore = new Ext.data.SimpleStore({
data:[
[1," "],
[2," "]
],
fields:["id","name"]
});
// xml
var movieXmlStore = new Ext.data.Store({
url:"./xml/movie.xml",
reader:new Ext.data.XmlReader({
record:"row",
id:"xmlMovie"
},[
"id",
"title",
"director",
{name:"released",type:'date',dateFormat:"Y-m-d"},
"genre",
"tagline",
"coverthumb",
{name:"price",type:'float'},
{name:"active",type:'bool'}
]
)
});
// json
var movieJsonStore = new Ext.data.JsonStore({
url:"./json/movie.json",
root : "rows",
fields: [
"id",
"title",
"director",
{name:"released",type:'date',dateFormat:"Y-m-d"},
"genre",
"tagline",
"coverthumb",
{name:"price",type:'float'},
{name:"active",type:'bool'}
]
});
// ,
var removeStore = new Ext.data.JsonStore({
url:"../saleInfo.do?method=getMovieInfo",
root:"rows",
totalProperty: 'results',
fields:[
"id",
"title",
"director",
{name:"released",type:'date',dateFormat:"Y-m-d"},
"genre",
"tagline",
"coverthumb",
{name:"price",type:'float'},
{name:"active",type:'bool'}
]
});
var grpStore = new Ext.data.GroupingStore({
url:"./json/movie.json",
sortInfo:{
field:"director",
direction:"DESC"
},
groupField:"director",
reader: new Ext.data.JsonReader({
root:"rows",
fields: [
"id",
"title",
"director",
{name:"released",type:'date',dateFormat:"Y-m-d"},
"genre",
"tagline",
"coverthumb",
{name:"price",type:'float'},
{name:"active",type:'bool'}
]
})
});
// grid store
var firstGrid = new Ext.grid.GridPanel({
title:" ",
width:700,
height:300,
frame:true,
stripeRows:true,
autoExpandColumn:5,
renderTo:document.body,
// store:store,
// store:movieXmlStore,
// store:removeStore,
store:grpStore,
columns:[{
header:" ",dataIndex:"image",renderer:function(val){
return "<img src='image/" + val + "'>";
}
},{
id:"title",header:" ",dataIndex:"title",renderer:function(val,x,curStore){
return "<b>" + val + "</b><br/>" + curStore.get("tagline");
}
},{
header:" ",dataIndex:"director"
},{
header:" ",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("m/d/y")
},{
header:" ",dataIndex:"genre"
// ,renderer:function(val){
// return genreStore.queryBy(function(rec){
// return rec.get("id") == val;
// },this).itemAt(0).get("name");
// }
},{
header:" ",dataIndex:"tagline"
},{
id:"price",header:" ",dataIndex:"price"
}
],
enableColumnMove:true,//
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
rowSelect:{
fn:function(sm,indx,record){
Ext.MessageBox.alert("title",record.get("title"));
}
}
}
}),
tbar:[{
text:"Change Title",
handler:function(){
var sm = firstGrid.getSelectionModel();
if(sm.hasSelection()){
var sel = sm.getSelected();
Ext.Msg.show({
title:"Change title",
prompt:true,
buttons:Ext.MessageBox.OKCANCEL,
value:sel.data.title,
fn:function(btn,txt){
if(btn == "ok"){
console.debug(txt);
sel.set("title",txt);
}
}
})
}
}
},{
text:"Hide price",
handler:function(btn){
var cm = firstGrid.getColumnModel();
var cmPrice = cm.getIndexById("price");
if(cm.isHidden(cmPrice)){
cm.setHidden(cmPrice,false);
btn.setText("Hide price");
}else{
cm.setHidden(cmPrice,true);
btn.setText("Show price");
}
btn.render();
}
}
],
// bbar:new Ext.PagingToolbar({
// pageSize:1,
// store:removeStore,
// items:[
// "-",
// {
// pressed: true,
// text:"test",
// enableToggle:true,
// toggleHandler:function(){
// Ext.Msg.show({
// title:"dss"
// });
// }
// }
// ]
// })
view:new Ext.grid.GroupingView()
});
// ,
var firstCm = firstGrid.getColumnModel();
firstCm.getColumnById(0).sortable = true;
// firstCm.setHidden(firstCm.getIndexById("title"),true);
//
firstCm.on("columnMoved",function(cm,oindx,nindx){
//
var colName = cm.getColumnHeader(oindx);
var msg = "";
if(oindx > nindx){
msg = colName + " move to left.";
}else{
msg = colName + " move to right.";
}
Ext.Msg.alert("colomn " + colName,msg);
});
// movieXmlStore.load();
// movieJsonStore.load();
// removeStore.load({params:{start:0,limit:1}});
grpStore.load();
})