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"?"女":"男";
        }
    }