Extjs实现Grid表格显示【一】

Ext.onReady(function(){
// Ext.Msg.alert("提示","hello world!! ");
var stu =new Ext.data.JsonStore({
data:[
{"schoolNo":"10001","name":"wind","sex":"1","age":"28","tel":"18603070000"},
{"schoolNo":"10002","name":"小月","sex":"0","age":"19","tel":"1860307123"},
{"schoolNo":"10003","name":"凌清秀","sex":"0","age":"20","tel":"1860307456"},
{"schoolNo":"10004","name":"冷清雪","sex":"0","age":"23","tel":"1860307789"},
{"schoolNo":"10005","name":"清灵","sex":"1","age":"27","tel":"1860307147"},
{"schoolNo":"10006","name":"小雪","sex":"0","age":"25","tel":"1860307258"},
{"schoolNo":"10007","name":"钟灵","sex":"1","age":"30","tel":"1860307369"},
{"schoolNo":"10008","name":"死神","sex":"1","age":"1000","tel":"1860307357"},
{"schoolNo":"10009","name":"无情","sex":"1","age":"35","tel":"1860307159"},
],
fields:["schoolNo","name","sex","age","tel"],
pageSize:5,
});

Ext.create("Ext.grid.Panel",{
title:"Grid表格练习",
heigth:400,
border:true,
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
},
columns:[
{
/* 自动显示行号*/
xtype:"rownumberer",
header:"序号",
sortable:true,
width:30,
},{
header:"学号", // 文本标题，与text类似，优先显示header
dataIndex:"schoolNo",
sortable:true,
hideable:false,  //是否可以隐藏，false=不可隐藏
},{
header:"名字",
dataIndex:"name",  //数据加载时对应的列名
sortable:true,  //启用排序
hideable:false, //是否可以隐藏，false=不可隐藏

},{
header:"性别",
dataIndex:"sex",
sortable:false,   //禁用排序
/*自定义加载数据*/
renderer:function(v){
return v=="0"?"女":"男";
}
},{
header:"年龄",
dataIndex:"age",
hidden:true, // 隐藏该列显示
},{
header:"电话",
dataIndex:"tel",
sortable:false,  // 禁用排序
flex:1,  // 最后一列填充满剩余空间
menuDisabled:true,  //禁用列头的右键菜单
}],
store: stu,
renderTo:Ext.getBody(),
tbar:[
{
text:"添加信息",
},{
text:"删除"
}
],
bbar:[
{
text:"下一页"
},{
text:"上一页"
}
]
})
})

主要内容如下：
1.显示行号
2.斑马线效果（奇偶行背景颜色不一致）
3.复制单元格问题
4.禁止点击列排序
5.禁止列头部右侧菜单
6.隐藏列
7.禁止隐藏列
8.自定义加载数据

1.显示行号
在Grid中增加行号列，xtype指定为rownumberer。
{xtype:"rownumberer", header:"序号", sortable:true, width:30}

2.斑马线效果（奇偶行背景色不一致）
在Grid中viewConfig属性，并将stripeRows指定为true。
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
}

3.复制单元格文字
同上，在Grid中viewConfig属性，并将enableTextSelection指定为true。
viewConfig:{
stripeRows:true,//在表格中显示斑马线
enableTextSelection:true //可以复制单元格文字
}

4.禁止点击列排序
将每个column定义属性sortable指定为false，实例中将“Name”列设定为不可排序。
{header: 'Name', dataIndex: 'name', width:100,sortable: false}

5.禁止显示列头部右侧菜单
将每个column定义属性menuDisabled指定为true，实例中将“Idno”列设定为不显示列头部右侧菜单。
{header: 'Idno', dataIndex: 'idno', width:150, menuDisabled:true}

6.隐藏列
将某个column属性hidden:true, 隐藏该列
{
header:"年龄",
dataIndex:"age",
hidden:true, // 隐藏该列显示
}

7.禁止隐藏列
将某个column属性hideable:false, 设置不可隐藏
{
header:"名字",
dataIndex:"name", //数据加载时对应的列名
sortable:true, //启用排序
hideable:false, //是否可以隐藏，false=不可隐藏

}
8.自定义加载数据 grid继承Ext.grid.column.ColumnView的renderer
将某个column重新实现renderer函数 , renderer:function(value){ ... } value=该列传入的值
{
header:"性别",
dataIndex:"sex",
sortable:false, //禁用排序
/*自定义加载数据*/
renderer:function(v){
return v=="0"?"女":"男";
}
}