以checkbox的形式选择多行，然后点击按钮显示选择行的信息：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" />
<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="CheckColumn.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
function formatDate(value) {
return value ? value.dateFormat('M d, Y') : '';
}
// var fm = Ext.form;
// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{
header: "编号",
dataIndex: "id",
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: "性别",
dataIndex: "sex",
renderer: changeSex,
editor:
{
xtype: 'textfield'
}
}, {
header: "名称",
dataIndex: "name",
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: "描述",
dataIndex: "descn",
width: 140,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
//这里是替代方法，感觉应该有封装好的，但是没有找到。这里用的是actioncolumn组件将icon路径设对就可以显示出来
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
header: 'save',
width: 50,
items: [{
icon: 'ext-3.4.0/resources/images/access/tree/drop-yes.gif', // Use a URL in the icon config
tooltip: 'save',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
Ext.MessageBox.alert('save', 'save successfuly!');
}
}]
},
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
header: 'delete',
width: 50,
items: [{
icon: 'ext-3.4.0/resources/images/access/tree/drop-no.gif', // Use a URL in the icon config
tooltip: 'delete',
handler: function() {
Ext.MessageBox.confirm('delete', 'confirm delete?');
}
}]
}
]);
cm.defaultSortable = true;
function changeSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>女</span>";
}
}
//JsonData
var jsondata = {
'coders': [
{ 'id': '1', 'sex': 'male', 'name': 'McLaughlin', 'descn': 'brett@newInstance.com' },
{ 'id': '2', 'sex': 'male', 'name': 'Hunter', 'descn': 'jason@servlets.com' },
{ 'id': '3', 'sex': 'female', 'name': 'Harold', 'descn': 'elharo@macfaq.com' },
{ 'id': '4', 'sex': 'female', 'name': 'Harolds', 'descn': 'elhaross@macfaq.com' },
{ 'id': '5', 'sex': 'male', 'name': 'Karolds', 'descn': 'lhaross@macfaq.com' },
{ 'id': '6', 'sex': 'female', 'name': 'Yarolds', 'descn': 'elaross@macfaq.com' },
{ 'id': '7', 'sex': 'male', 'name': 'Jarolds', 'descn': 'elharss@macfaq.com' },
{ 'id': '8', 'sex': 'male', 'name': 'Larolds', 'descn': 'elhass@macfaq.com' },
{ 'id': '9', 'sex': 'female', 'name': 'Haroldws', 'descn': 'elhaross@macfaq.com' },
{ 'id': '10', 'sex': 'male', 'name': 'WHarolds', 'descn': 'elhaross@macfaq.com' }
],
'musicians': [
{ 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
{ 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
]
};
// ArrayReader
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(jsondata),
reader: new Ext.data.JsonReader({ root: 'coders' }, [
{ name: 'id' },
{ name: 'sex' },
{ name: 'name' },
{ name: 'descn' }
])
});
store.load();
var tbar = [
new Ext.Toolbar.TextItem('Tools bar:'),
{ xtype: "tbfill" }, {
pressed: true,
text: "Refresh",
handler: function() {
Ext.Msg.alert("Refresh", "Refresh!")
}
}, {
xtype: "tbfill"
}, {
pressed: true,
text: "Selection",
handler: selectionclick
}, {
xtype: "tbseparator"
}, {
pressed: true,
text: "Add",
handler: function() { Ext.Msg.alert("Add", "add infro!") }
}, {
xtype: "tbseparator"
}, {
pressed: true,
text: "save",
handler: function() {
Ext.Msg.alert("Save", "save infro successed!!!")
}
}, {
xtype: "tbseparator"
}
];
// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
draggable: true,
store: store,
cm: cm,
sm: sm,
renderTo: 'editor-grid',
width: 630,
height: 330,
tools: [{ id: "save" }, {
id: "help",
handler: function() { Ext.Msg.alert("Help", "Need help!") }
}, {
id: "close",
handler: function() { grid.hide(); }
}],
tbar: tbar,
bbar: [
//new Ext.Toolbar.TextItem("haha:"),
{xtype: "tbfill" }, {
text: " Reset this grid"
}
],
collapsible: true,
multiSelect: true,
title: 'Edit Plants',
frame: true,
clicksToEdit: 2,
trackMouseOver: true,
//viewConfig: {
stripeRows: true,
enableTextSelection: true
// }
});
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex);
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
Ext.MessageBox.alert('show', '当前选中的数据是' + data);
}
function selectionclick() {
var arr = grid.getSelectionModel().getSelections();
for (var i = 0; i < arr.length; i++) {
Ext.Msg.alert("title", arr[i].get("sex"));
return;
}
}
});
</script>
</head>
<body>
<div id="hello">
<div id="editor-grid">
</div>
</div>
</body>
</html>
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
