ExtJs系列之Grid

**
* 表格综合演绎(表格基本组成，渲染特殊类型，自定义渲染，选择模型，分页)
*/

/*
Ext.onReady(function(){

//自定义渲染器
var renderSex = function(value){
return (value=="man")?"男":"女";
};

//复选模型(行选择模型的子类)
var sm = new Ext.grid.CheckboxSelectionModel({
//取消选择单元格即选中此行，只让用户选中复选框才能选中此行
handleMouseDown:new Ext.emptyFn()
});

//列模型
var cm = new Ext.grid.ColumnModel(
//每一项定义一列
[
//行号
new Ext.grid.RowNumberer(),
//复选框
sm,
{header:"编号",dataIndex:"id",sortable:true},
{header:"名称",dataIndex:"name"},
//通过自定义渲染器渲染性别
{header:"性别",dataIndex:"sex",renderer:renderSex},
{header:"描述",dataIndex:"desc"},
//按指定日期格式渲染日期
{header:"日期",dataIndex:"date",type:"date",renderer:new Ext.util.Format.dateRenderer("Y年m月d日"),sortable:true}
]
);

//数据
var data = [
["1","name1","man","desc1","1970-01-15T02:58:04"],
["2","name2","femail","desc2","1970-01-15T02:58:04"],
["3","name3","man","desc3","1970-01-15T02:58:04"],
["4","name4","femail","desc4","1970-01-15T02:58:04"],
["5","name5","man","desc5","1970-01-15T02:58:04"]
];

//仓库
var store = new Ext.data.Store({
//数据来源
proxy:new Ext.data.MemoryProxy(data),
//解析方式
reader:new Ext.data.ArrayReader({},[
{name:"id"},
{name:"name"},
{name:"sex"},
{name:"desc"},
//按指定日期格式解析日期
{name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
])
});


//定义表格面板,指定列模型，仓库，选择模型(默认行选择模型)
var grid = new Ext.grid.GridPanel({
width:500,
autoHeight:true,
//列重新计算后自动填满[Ext.grid.GridView]
viewConfig:{
forceFit:true,
columnsText:"显示的列",
sortAscText:"升序",
sortDescText:"降序"
},
store:store,
cm:cm,
sm:sm,
bbar:new Ext.PagingToolbar({
pageSize:5,
//将分页工具条与Ext.data.Store关联，从而共享数据模型
store:store,
displayInfo:true,
displayMsg:"显示第 {0} - {1}条记录,共 {2} 条记录",
emptyMsg:"没有记录"
}),
renderTo:"grid"
});

store.load();

Ext.get("removeButton").on("click",function(){
store.remove(store.getAt(1));
//删除后获取表格视图,刷新表格
grid.view.refresh();
});

grid.on("click",function(){
var selections = grid.getSelectionModel().getSelections();
for(var i=0;i<selections.length;i++){
var record = selections[i];
Ext.Msg.alert("提示","您所选中的行的编号为"+record.get("id")+",名称为"+record.get("name"));
}
});
});
*/

/**
* 后台分页
*/


//换掉proxy,不再到内存中查找，而是通过HTTP获得
//解析器换成JsonReader
Ext.onReady(function(){

//自定义渲染器
var renderSex = function(value){
return (value=="man")?"男":"女";
};

//列模型
var cm = new Ext.grid.ColumnModel(
//每一项定义一列
[
//行号
new Ext.grid.RowNumberer(),
//复选框
{header:"编号",dataIndex:"id",sortable:true},
{header:"名称",dataIndex:"name"},
//通过自定义渲染器渲染性别
{header:"性别",dataIndex:"sex",renderer:renderSex},
{header:"描述",dataIndex:"desc"},
//按指定日期格式渲染日期
{header:"日期",dataIndex:"date",type:"date",renderer:new Ext.util.Format.dateRenderer("Y年m月d日"),sortable:true}
]
);

//仓库
var store = new Ext.data.Store({
//数据来源
proxy:new Ext.data.HttpProxy({url:"http://localhost:8000/ExtJs/grid/data.jsp"}),
//解析方式
reader:new Ext.data.JsonReader({
totalProperty:"totalProperty",
root:"root"
},[
{name:"id"},
{name:"name"},
{name:"sex"},
{name:"desc"},
//按指定日期格式解析日期
{name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
])
});


//简化仓库 JsonStore = Store + HttpProxy + JsonReader
/*
var fields = [
{name:"id"},
{name:"name"},
{name:"sex"},
{name:"desc"},
//按指定日期格式解析日期
{name:"date",type:"date",dateFormat:"Y-m-dTH:i:s"}
];

var store = new Ext.data.JsonStore({
url:"http://localhost:8000/ExtJs/grid/data.jsp",
totalProperty:"totalProperty",
root:"root",
fields:fields
});
*/

//定义表格面板,指定列模型，仓库，选择模型(默认行选择模型)
var grid = new Ext.grid.GridPanel({
width:500,
autoHeight:true,
//列重新计算后自动填满[Ext.grid.GridView]
viewConfig:{
forceFit:true,
columnsText:"显示的列",
sortAscText:"升序",
sortDescText:"降序"
},
store:store,
cm:cm,
bbar:new Ext.PagingToolbar({
pageSize:5,
//将分页工具条与Ext.data.Store关联，从而共享数据模型
store:store,
displayInfo:true,
firstText:"首页",
lastText:"尾页",
prevText:"上一页",
nextText:"下一页",
displayMsg:"显示第 {0} - {1}条记录,共 {2} 条记录",
emptyMsg:"没有记录"
}),
renderTo:"grid"
});

store.load({params:{start:0,limit:5}});

});


/**
* 数据校验
*/
/*
for(var i=0;i<records.length;i++){
var record = records[i];
var fields = record.fields.keys;
for(var j=0;j<fields.length;j++){
var name = fields[j];
var value = record.data[name];
var colIndex = cm.findColumnIndex(name);
var rowIndex = store.indexOfId(record.id);
var editor = cm.getCellEditor(colIndex).field;

if(!editor.validateValue(value)){
Ext.Msg.alert("提示","请确保输入的数据正确",function(){
grid.startEditing(rowIndex.colIndex);
});
return;
}
}
}
*/
/**
* 限制输入的数据类型
*/
/*
//放到grid里显示的原始数据
var data = [
[1.1,1,new Date(),true],
[2.2,2,new Date(),false],
[3.3,0,new Date(),true],
[4.4,1,new Date(),false],
[5.5,2,new Date(),true]
];

//现在分别对这5列设置各自的编辑器

var comboData = [
["0","新版Ext教程"],
["1","Ext在线支持"],
["2","Ext扩展"]
];

var cm = new Ext.grid.ColumnModel([{
header:"数字列",
dataIndex:"number",
editor:new Ext.grid.GridEditor(new Ext.form.NumberField({
allowBlank:false,
allowNegative:false,
maxValue:10
}))
},{
header:"选择列",
dataIndex:"combo",
editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:["value","text"],
data:comboData
}),
emptyText:"请选择",
mode:"local",
triggerAction:"all",
valueField:"value",
displayField:"text",
reanOnly:true
})),
renderer:function(value){
return comboData[value][1];
}
},{
header:"日期列",
dataIndex:"data",
editor:new Ext.grid.GridEditor(new Ext.form.DateField({
format:"Y-m-d",
minValue:"2007-12-14"
})),
renderer:function(value){
return value.format("Y-m-d");
}
},{
header:"判断列",
dataIndex:"check",
editor:new Ext.grid.GridEditor(new Ext.form.Checkbox({
allowBlank:false
})),
renderer:function(value){
return value?"是":"否";
}
}
]);
*/