本篇的內容是為表格添加行號，和復選框，最后談一下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("提示","你還沒有選中記錄.");
});
});
ExtJS表格——行號、復選框、選擇模型
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。