ExtJS报表――行号、复选框、选择模型 _JavaScript

ExtJS表格――行号、复选框、选择模型

一、?设置行号
???行号的设置主要问题在于删除某一行后需要重新计算行号
??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:?'id'?},
????????????????????????????????????{?name:?'sex'?},
????????????????????????????????????{?name:?'name'?},
????????????????????????????????????{?name:?'descn'?}
????????????????????????????????])
????????????????????????????????});
??????????????????????
?????????store.load();
?????????var?grid?=?new?Ext.grid.GridPanel({
?????????????autoHeight:?true,
?????????????renderTo:?'grid',
?????????????store:?store,
?????????????cm:?cm，
?????????????sm：sm
?????????});
?????});
三、选择模型
(1).RowSelectionModel?模型
????在定义Ext.grid.GridPanel时，默认使用的是RowSelectionModel――行选择模型，当单击某一个单元格时，默认选中的是却是整行，选择模型默认
支持多选，鼠标单击时按住Shift或Ctrl键就可以选择多行。如果只希望选择一行，需要设置singleSelect参数。
(2).CellSelectionModel模型
????每次只允许选择一个单元格，EditorGrid里默认使用的就是CellSelectionModel.?当然也可以将EditorGrid的选择模型设置为RowSelectionModel，
从而达到选中一整行的效果。
(3).获取选中的行
??Ext.get('remove').on('click',?function()?{
?????????????var?selections?=?grid.getSelectionModel().getSelections();????--先获取选择模型，然后从选择模型中获取选中的记录。
?????????????if?(selections.length?>?0)?{
?????????????????Ext.Msg.confirm('提示',?'你确认删除选中的记录吗？',?function(_btn)?{
?????????????????????if?(_btn?==?'yes')?{
?????????????????????????for?(var?i?=?0;?i?<?selections.length;?i++)?{
?????????????????????????????var?record?=?selections;
?????????????????????????????store.remove(record);
?????????????????????????}
?????????????????????????grid.view.refresh();
?????????????????????}
?????????????????});