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中的数据
})
})