本篇的内容是为表格添加行号，和复选框，最后谈一下Ext的选择模型。内容比较简单，就直接上代码了。
一、 设置行号
行号的设置主要问题在于删除某一行后需要重新计算行号
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();
}
});
}
else
Ext.Msg.alert("提示","你还没有选中记录.");
});
});
相关文章：