Ext.onReady(function () { var sm = new Ext.grid.RowSelectionModel({singleSelect:true})//设置单选 //var sm = new Ext.grid.CheckboxSelectionModel();//设置多选 var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //显示行号 sm, { header: "id", dataIndex: "id", sortable: true/*允许排序*/ }, { header: "name", dataIndex: "name" }, { header: "score", dataIndex: "score", render: function (value) { if (value > 100) { console.dir(value); return "<span style='color:red'>优秀</span>"; } else { return "<span style='color:green'>不及格</span>"; } } }, { header: "date", dataIndex: 'date', type: 'data', render: Ext.util.Format.dateRenderer('Y年m月d日') } ])/*显示日期数据允许排序*/; var data = [['1', 'lilei', 100, '1970-01-15T02:58:04'], ['2', 'hanmeimei', 60, '1970-01-15T02:58:04'], ['3', 'john', 95, '1970-01-15T02:58:04'] ]; var store = new Ext.data.Store({ //Ext.data.Store创建一个存储对象,store负责把各种各样的数据(array,json)转换成Ext.data.Record proxy: new Ext.data.MemoryProxy(data), //定义代理 reader: new Ext.data.ArrayReader({}, [ //Ext.data.ArrayReader用来解析数组 {name: 'id' }, //这里可以使用mapping来指定数据的位置,如果想把数组中的第2个元素映射成id,mapping:1 {name: 'name' }, { name: 'score' }, { name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s' } ]), sortInfo: { field: 'name', direction: 'ASC'} //解决中文排序 }); store.load(); var grid = new Ext.grid.GridPanel({ height: 500, enableColumnMove: false, enableColumnResize: false, //是否允许调整列宽 stripeRows: true, //是否显示斑马纹 renderTo: Ext.getBody(), store: store, cm: cm, sm: sm, viewConfig: { forceFit: true }, //列宽自适应 autoExpandColumn: 'id' //让指定的列自动伸展,如果宽度不够用,那么自动加宽 }) Ext.get("remove").on('click', function () { store.remove(store.getAt(1))//删除store中的数据 }) })