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();
})
