<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>grid.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="Extjs/3.3.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="Extjs/3.3.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Extjs/3.3.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//定义数据
var data =[['1','name1','descn1'],
['2','name2','descn2'],
['3','name3','descn3'],
['4','name4','descn4'],
['5','name5','desc5']];
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
ds:ds,
cm:cm,
sm:sm,
width:300,
autoHeight:true
});
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
grid.addListener('cellclick', cellclick);//調用當前單擊的行編號
});
//當即某行記錄 彈出該行記錄編號
function cellclick(grid, rowIndex, columnIndex, e){
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);
}
//右鍵菜單
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//点击后触发的事件
text: '右键菜单1'
},
{
//id: 'rMenu2',
handler:lMenulFn,
text: '右键菜单2'
}
]
});
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('right','rightClick');
}
function lMenulFn(){
Ext.MessageBox.alert('left','leftClick');
}
</script>
<div id="rightClickCont">
</body>
</html>
