Extjs grid 及触发事件

最新推荐文章于 2019-05-16 16:02:06 发布

原创最新推荐文章于 2019-05-16 16:02:06 发布 · 7.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #function #stylesheet #header #html #div

Extjs 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用 ExtJS 构建一个具备基本功能的表格，并实现表格的右键菜单功能。通过示例代码展示了如何设置表格列、加载数据以及监听表格单元格点击事件和行的右键点击事件。

<!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>