Extjs grid 及触发事件

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

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

文章标签：

#javascript #ViewUI

本文展示了一个使用ExtJS框架创建的网格组件示例，包括Checkbox选择模型、自定义列模型及数据存储，并实现了单元格点击事件和右键菜单功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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