如图,点击grid后出现一个右击菜单;更加菜单来做对应的操作:
grid提供了4个与右击菜单有关的事件
contextmenu:(Ext.EventObject e)
全局性的右键事件
cellcontextmenu:(Grid this,Number rowIndex,Number cellIndex,Ext.EventObject e)
单元格上的有机事件;
rowcontextmenu(Grid this,Number rowIndex,Ext.EventObject e)
行上的右键事件。
headercontextmenu:(Grid this,Number columnIndex,Ext.EventObject e)
表头上的右击事件。
步骤:
为grid添加一个监听rowContenxtmenu事件,
点击时阻止window弹出右键菜单;
获得点击所在的行,
将创建好的Menu菜单展现出来
var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [{
text: '查看详情',
handler: function(){
}
}]
});
grid.on("rowcontextmenu", function(grid, rowIndex, e){
e.preventDefault();
grid.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});
示例:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../ext3.2/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext3.2/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var cm = new Ext.grid.ColumnModel([
{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','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
var contextmenu = new Ext.menu.Menu({
id: 'theContextMenu',
items: [{
text: '查看详情',
handler: function(){
}
}]
});
grid.on("rowcontextmenu", function(grid, rowIndex, e){
e.preventDefault();
grid.getSelectionModel().selectRow(rowIndex);
contextmenu.showAt(e.getXY());
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid" style="height:265px;"></div>
</body>
</html>