ExtJS报表——行号、复选框、选择模型
日期：2014-05-16 浏览次数：20311 次
一、?设置行号
???行号的设置主要问题在于删除某一行后需要重新计算行号
??Ext.onReady(function()?{
?????????var?cm?=?new?Ext.grid.ColumnModel([
?????????????????????new?Ext.grid.RowNumberer(),???????????--在这里设置行号
????????????????????{?header:?'编号',?dataIndex:?'id'?},
????????????????????{?header:?'性别',?dataIndex:?'sex'?},
????????????????????{?header:?'名称',?dataIndex:?'name'?},
????????????????????{?header:?'描述',?dataIndex:?'descn'?}
?????????????????]);
?????????var?data?=?[
????????????????????????['1',?'male',?'name1',?'descn1'],
????????????????????????['2',?'female',?'name2',?'descn2'],
????????????????????????['3',?'male',?'name3',?'descn3'],
????????????????????????['4',?'female',?'name4',?'descn4'],
????????????????????????['5',?'male',?'name5',?'descn5']
????????????????????];
?????????var?store?=?new?Ext.data.Store({
?????????????????????????proxy:?new?Ext.data.MemoryProxy(data),
?????????????????????????reader:?new?Ext.data.ArrayReader({},?[
????????????????????????????????????{?name:?'id'?},
????????????????????????????????????{?name:?'sex'?},
????????????????????????????????????{?name:?'name'?},
????????????????????????????????????{?name:?'descn'?}
????????????????????????????????])
????????????????????????????????});
??????????????????????
?????????store.load();
?????????var?grid?=?new?Ext.grid.GridPanel({
?????????????autoHeight:?true,
?????????????renderTo:?'grid',
?????????????store:?store,
?????????????cm:?cm
?????????});
?????????Ext.get('remove').on('click',?function()?{???--监听删除按钮的单击事件
?????????????store.remove(store.getAt(1));????????????--store.getAt(1)?获得第2行数据
?????????????grid.view.refresh();?????????????????????--强制grid刷新，重新计算行号
?????????});
?????});
页面代码：
?<body>
????????<div?id="grid"></div>
????????<input?id="remove"?type="button"?value="删除第二行数据"?/>
</body>
二、?设置复选框
?复选框是通过Ext.grid.CheckboxSelectionModel来设置的，它会在每行数据前加一个复选框，另外它必须添加到列定义和表格装配定义2个部分。默认单击表格的某一行，复选框就会自动选中。可以通过如下设置取消单击即选中，而需要通过单击复选框来选中:
??var?sm?=?Ext.grid.CheckboxSelectionModel(｛?handleMouseDown:?Ext.emptyFn?｝);???
复选框设置代码：
?Ext.onReady(function()?{
?????????var?sm?=?Ext.grid.CheckboxSelectionModel();???
?????????var?cm?=?new?Ext.grid.ColumnModel([
?????????????????????new?Ext.grid.RowNumberer(),???????????--在这里设置行号
?????????????????????sm,???????????????????????????????????--设置复选框//不添加这项 就不会显示单选了
????????????????????{?header:?'编号',?dataIndex:?'id'?},
????????????????????{?header:?'性别',?dataIndex:?'sex'?},
????????????????????{?header:?'名称',?dataIndex:?'name'?},
????????????????????{?header:?'描述',?dataIndex:?'descn'?}
?????????????????]);
?????????var?data?=?[
????????????????????????['1',?'male',?'name1',?'descn1'],
????????????????????????['2',?'female',?'name2',?'descn2'],
????????????????????????['3',?'male',?'name3',?'descn3'],
????????????????????????['4',?'female',?'name4',?'descn4'],
????????????????????????['5',?'male',?'name5',?'descn5']
????????????????????];
?????????var?store?=?new?Ext.data.Store({
?????????????????????????proxy:?new?Ext.data.MemoryProxy(data),
?????????????????????????reader:?new?Ext.data.ArrayReader({},?[
????????????????????????????????????{?name
