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

        }

    }