<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第十九章：Ext 表格组件</title>
<link rel="stylesheet" href="src/ext/resources/css/ext-all.css">
<!--ext-base 必须在ext-all之前引入-->
<script src="src/ext/ext-base.js"></script>
<script src="src/ext/ext-all.js"></script>
<!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
<style>
</style>
</head>
<body>
<div id="e">
</div>
<script>
Ext.onReady(function () {
// 列模型
// 自定义序列号
Ext.grid.RowNumberer.prototype = {
header: '',
23,
sortable: false,
fixed: true,
menuDisabled: true,
dataIndex: '',
id: 'numberer',
rowspan: undefined,
renderer: function (v, p, record, rowIndex) {
if (this.rowspan) {
p.cellAttr = 'rowspan=' + this.row.span;
}
return rowIndex + 1;
},
};
// 创建一个Ext.grid.CheckboxSelectionModel对象
var sm = new Ext.grid.CheckboxSelectionModel();
// 显示序号
var cm = new Ext.grid.ColumnModel([
// 调用序列号函数
new Ext.grid.RowNumberer(),
sm,
{
header: '姓名',
80,
dataIndex: 'Name',
tooltip: '这是您的姓名',
},
{
header: '性别',
40,
dataIndex: 'Sex',
align: 'center',
renderer: function (v) {
if (v === '男') {
return '<img src="src/ext/resources/images/default/dd/drop-yes.gif">';
} else {
return '<img src="src/ext/resources/images/default/dd/drop-no.gif">';
}
},
},
{
header: '生日',
150,
format: 'Y-m-d',
dataIndex: 'Birthday',
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
},
{
header: '学历',
80,
dataIndex: 'Education',
align: 'center',
},
{
id: 'memo',
header: '备注',
dataIndex: 'Memo',
},
{
header: '操作',
150,
dataIndex: '',
menuDisabled: true,
renderer: function (v) {
return '<span style="margin-right: 10px"><a href="#">修改</span><span ><a href="#">删除</span>';
},
},
]);
var data = [
{
name: '小李',
sex: '男',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '无备注',
}, {
name: '小陈',
sex: '男',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '一个小帅哥',
}, {
name: '小易',
sex: '女',
birthday: Date.parseDate('1979-04-11', 'Y-m-d'),
edu: '本科',
memo: '无备注',
}, {
name: '小军',
sex: '男',
birthday: Date.parseDate('1980-12-11', 'Y-m-d'),
edu: '本科',
memo: '最帅老师',
}];
// Proxy
var proxy = new Ext.data.MemoryProxy(data);
// Record 定义记录结果
var Human = Ext.data.Record.create([
{
name: 'Name',
type: 'string',
mapping: 'name',
},
{
name: 'Sex',
type: 'string',
mapping: 'sex',
},
{
name: 'Birthday',
type: 'string',
mapping: 'birthday',
},
{
name: 'Education',
type: 'string',
mapping: 'edu',
},
{
name: 'Memo',
type: 'string',
mapping: 'memo',
},
]);
// Reader
var reader = new Ext.data.JsonReader({}, Human);
// Store
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
});
// 立即加载
store.load();
var tbar = new Ext.Toolbar({
buttons: [
{
text: '添加到首行',
icon: 'src/ext/resources/images/default/dd/drop-add.gif',
handler: function () {
var view = grid.getView();
// 添加一个数据
var obj = {
Name: '新人物',
Sex: '女',
Birthday: Date.parseDate('1980-05-12', 'Y-m-d'),
Education: '本科',
Memo: '是新的',
};
var human = new Human(obj);
grid.getStore().insert(0, human); // 添加到行首，修改第一个参数可以添加到任何位置
view.refresh();
},
},
{
text: '添加到尾行',
icon: 'src/ext/resources/images/default/dd/drop-add.gif',
handler: function () {
var view = grid.getView();
// 添加一个数据
var obj = {
Name: '新人物',
Sex: '女',
Birthday: Date.parseDate('1980-05-12', 'Y-m-d'),
Education: '本科',
Memo: '是新的',
};
var human = new Human(obj);
grid.getStore().add(human); // 添加到行首，修改第一个参数可以添加到任何位置
view.refresh();
},
},
{
text: '删除选定行',
icon: 'src/ext/resources/images/default/dd/drop-no.gif',
cls: 'x-btn-text-icon',
handler: function () {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
for (var i = view.getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
store.remove(store.getAt(i));
}
}
view.refresh()
},
},
{
text: '删除所有',
icon: 'src/ext/resources/images/default/dd/drop-no.gif',
cls: 'x-btn-text-icon',
handler: function () {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
store.removeAll()
view.refresh()
},
}
]
})
var bbar = new Ext.Toolbar({
buttons: [
{
text: '当前数据',
handler: function () {
var view = grid.getView();
var rsm = grid.getSelectionModel(); // 得到行选择模型
var r = '';
for (var i = 0; i < view.getRows().length; i++) {
if (rsm.isSelected(i)) {
// 找到选中的行
r += grid.getStore().getAt(i).get('Name') + '<br/>';
}
}
Ext.Msg.alert('选择', '您选择的数据有：<br>' + r);
},
},
{
text: '第一行',
handler: function () {
// 得到行选择模型 Ext.grid.CheckboxSelectionModel
var rsm = grid.getSelectionModel();
rsm.selectFirstRow();
},
},
{
text: '上一行',
handler: function () {
var rsm = grid.getSelectionModel(); // 得到行选择模型
// 判断是否有上一行
if (!rsm.hasPrevious()) {
Ext.Msg.alert('警告', '已到达第一行');
} else {
// 选择上一行
rsm.selectPrevious();
}
},
},
{
text: '下一行',
handler: function () {
var rsm = grid.getSelectionModel();
if (!rsm.hasNext()) {
Ext.Msg.alert('警告', '已到达最后一行');
} else {
rsm.selectNext();
}
},
},
{
text: '最后一行',
handler: function () {
var rsm = grid.getSelectionModel();
rsm.selectLastRow();
},
},
{
text: '全选',
handler: function () {
var rsm = grid.getSelectionModel();
rsm.selectAll();
},
},
{
text: '全不选',
handler: function () {
var rsm = grid.getSelectionModel();
console.log(grid.getView().getRows().length);
rsm.deselectRange(0, grid.getView().getRows().length - 1);
},
},
{
text: '反选',
handler: function () {
var rsm = grid.getSelectionModel();
for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
rsm.deselectRow(i);
} else {
rsm.selectRow(i, true); // 必须保留原来的，否则效果无法实现
}
}
},
}
],
})
var grid = new Ext.grid.GridPanel({
title: '中国公民',
height: 400,
cm: cm,
sm: sm,
store: store,
renderTo: Ext.getBody(),
autoExpandColumn: 'memo', // 自动伸展，占满剩余区域
buttonAlign: 'center',
buttons : bbar,
tbar : tbar
});
});
</script>
</body>
</html>
