ExtJs删除表格记录.rowcontextmenu

原创 2012年07月26日 18:43:09
	var id = 0;//在外面声明个全局变量id
	Ext.onReady(function(){
		var studentRecord = new Ext.data.Record.create([
			{name:'id',type:'int'},
			{name:'sid',type:'int'},
			{name:'username',type:'string'},
			{name:'gender',type:'string'}
		]);
		
		var columns = new Ext.grid.ColumnModel([
			{header:'学号',dataIndex:'sid',sortable:true},
			{header:'姓名',dataIndex:'username'},
			{header:'性别',dataIndex:'gender',sortable:true}
		]);
		
		var grid = new Ext.grid.GridPanel({
			title:'学生信息管理',
			loadMask:true,
			store:store,
			cm:columns,
			autoHeight:true,
			sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
			viewConfig:{
				forceFit:true,
				columnsText:'所有列',
				sortAscText:'小到大排序',
				sortDescText:'大到小排序'
			},
			bbar:new Ext.PagingToolbar({
				pageSize:15,
				store:store,
				displayInfo:true,
				displayMsg:'显示第 {0} - {1} 条记录,共 {2} 条',
				emptyMsg:'没有记录!'
			})
		});
		
		//重点!
		grid.on('rowcontextmenu',function(grid,rowIndex,e){//给表格添加一个 行上的右键点击事件
			e.preventDefault();//取消默认的浏览器右键事件
			grid.getSelectionModel().selectRow(rowIndex);//将点中的那行选中
			contextmenu.showAt(e.getXY());//在选中的那行显示按钮
			var record = grid.getStore().getAt(rowIndex);//获取选中行的数据集
			var id = record.get('id');//再通过数据集获取id
			setId(id);//将获取的Id赋值给全局变量
		});
		function setId(id){
			this.id = id;
		}
		
		var contextmenu = new Ext.menu.Menu({
			id:'deleteMenu',
			items:[{
				text:'删除',
				handler:function(){//删除事件
					Ext.Ajax.request({
						url:'crud!delete.action',
						params:{'student.id':this.id},//action只要提供Student的get()/set()方法就ok了
						success:function(response,options){
							...
						},
						failure:function(response,options){
							...
						}
					});
				}
			}]
		});
	});


相关文章推荐

Ext4右键菜单实现

1、首先禁用浏览器默认右键菜单,代码如下:      将下列代码加到Ext.onReady()中即可解决:      Ext.getDoc().on("contextmenu", function(...

给 Extjs grid 加入右键菜单。

给 Extjs  grid 加入右键菜单。 receiveListGrid.on("rowcontextmenu",function(grid,rowIndex,e){ e.prevent...

创建easyui的右键菜单(onRowContextMenu)

第一步: 在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui) 代码:                                 查看个人信息           ...

EXTJS4.0+MVC表格基础实例(分页查询,修改和删除)

EXTJS4.0+MVC表格基础实例(分页查询,修改和删除) -           Ext.require([         'Ext.grid.*',   ...

Extjs3 在同一个表格中拖放记录

var grid = new Ext.grid.GridPanel({ autoHeight : true, rende...
  • brswbx
  • brswbx
  • 2013年11月02日 20:36
  • 467

extjs显示表格信息

  • 2012年04月17日 10:01
  • 918B
  • 下载

Extjs4.2 表格动态数据加载,以及动态选择分页条目,前后台详解

刚自学extjs,搞到分页后碰到了许多问题,特记录下,方便你我他 一、grid_gridpanel_paging.jsp页面引入: 二、编写前端grid_gridpan...

Extjs改变表格的颜色

  • 2010年05月05日 11:02
  • 24KB
  • 下载

ExtJS4.2学习(七)EditorGrid可编辑表格

原网址:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJs删除表格记录.rowcontextmenu
举报原因:
原因补充:

(最多只允许输入30个字)