ExtJS表格——行号、复选框、选择模型
本篇的内容是为表格添加行号,和复选框,最后谈一下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 >});