Ext.onReady(function(){ var sm = new Ext.grid.CheckboxSelectionModel();//显示选择框 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(),//显示行号 sm,//显示选择框 { header : "姓名",// 列头文字说明 width : 80, dataIndex : "Name",// 记录结构中的name属性值 tooltip : "这是你的姓名"// 悬停提示 }, { header : "性别", width : 40, dataIndex : "Sex", align : "center", renderer : function(v) { if (v == "男") { return "<img src='imgs/boy.gif'>"; } else { return "<img src='imgs/girl.gif'>"; } } }, { header : "生日", width : 150, format : "Y-m-d", dataIndex : "Birthday", renderer : Ext.util.Format.dateRenderer("Y-m-d") }, { header : "学历", width : 80, dataIndex : "Education", align : "center" }, { id : "memo", header : "备注", dataIndex : "Memo" }, { header : "操作", width : 150, dataIndex : "Operation", menuDisabled : true, renderer : function(v) { return "<sapn style='margin-right:10px'><a href='#'>修改</a></span>" + "<span><a href='#'>删除</a></span>"; } } ]); // 给每个列添加数据 var data = [{ name : "学生A", sex : "男", birthday : Date.parseDate("1987-12-08", "Y-m-d"), edu : "本科", memo : "无备注" }, { name : "学生B", sex : "女", birthday : Date.parseDate("1974-04-23", "Y-m-d"), edu : "大专", memo : "漂亮MM" }, { name : "学生C", sex : "女", birthday : Date.parseDate("1978-05-17", "Y-m-d"), edu : "硕士", memo : "无备注" }, { name : "学生D", sex : "女", birthday : Date.parseDate("1988-07-14", "Y-m-d"), edu : "硕士", memo : "无备注" }]; // proxy var proxy = new Ext.data.MemoryProxy(data); // 定义记录结果 var Human = Ext.data.Record.create([{ name : "Name", type : "string", mapping : "name" }, { name : "Sex", type : "string", mapping : "sex" }, { name : "Birthday", type : "string", mapping : "birthday" }, { name : "Education", type : "string", mapping : "edu" }, { name : "Memo", type : "string", mapping : "memo" }, { name : "Operation", type : "string" // mapping:"oper" }]); var reader = new Ext.data.JsonReader({}, Human); //提供数据源 var store = new Ext.data.Store({ proxy : proxy, reader : reader }); store.load(); var grid = new Ext.grid.GridPanel({ title:"学生信息", width:700, autoHeight:true, cm:cm, sm:sm, store:store, renderTo:"a", autoExpandColumn:"memo",//自动伸展 buttonAlign:"center", buttons:[{ text:"第一行", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 rsm.selectFirstRow(); } },{ text:"上一行", handler:function(){ var rsm = grid.getSelectionModel();//得到选择行的模型 if(!rsm.hasPrevious()){ Ext.Msg.alert("警告","已到达第一行"); }else{ rsm.selectPrevious(); } } },{ text:"下一行", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 if(!rsm.hasNext()){ Ext.Msg.alert("警告","已到达最后一行"); }else{ rsm.selectNext() } } },{ text:"最后一行", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 rsm.selectLastRow(); } },{ text:"全选", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 rsm.selectAll(); } },{ text:"全不选", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 rsm.deselectRange(0,grid.getView().getRows().length - 1); } },{ text:"反选", handler:function(){ var rsm = grid.getSelectionModel();//得到行选择模型 for (var i = grid.getView().getRows().length - 1; i >= 0; i--) { if(rsm.isSelected(i)){ rsm.deselectRow(i); }else{ rsm.selectRow(i,true);//必须保留原来的,否则效果无法是实现 } } } }] }); })