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){
							...
						}
					});
				}
			}]
		});
	});


创建easyui的右键菜单(onRowContextMenu)

第一步: 在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui) 代码:                                 查看个人信息           ...
  • angel_lili
  • angel_lili
  • 2017年02月16日 10:26
  • 1835

编辑 Ext 表格(一)——— 动态添加删除行列

一、动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除。   (1) 动态添加表格的行  gridS...
  • zhengjiafa
  • zhengjiafa
  • 2016年12月18日 11:39
  • 2228

ExtJS中的Grid表格实现删除行功能部分代码

需要注意的是:storeId: 'persons', {                        xtype: 'button',                        text: '删...
  • LukeFred_zhang
  • LukeFred_zhang
  • 2017年08月03日 11:06
  • 404

Ext中grid删除行

grid.getSelectionModel().getSelected();//获取选中的第一条记录,返回record类型 grid.getSelectionModel().getSelection...
  • smshuxue
  • smshuxue
  • 2013年10月27日 13:43
  • 2773

extjs 表格中添加、 删除、撤销、刷新功能

1. js页面 var add_action=new Ext.Action({ id:'add', text:BizFuse.message['new.text'], icon...
  • wangchuanbaodhcc
  • wangchuanbaodhcc
  • 2011年09月08日 10:52
  • 3297

Extjs 4.0.7 gridPanel记录添加右键菜单事件

// GridPanel注册 grid.addListener('itemcontextmenu', itemcontextmenu); /** * 分类代码grid右键菜单 */ functi...
  • liyong20080101
  • liyong20080101
  • 2013年09月24日 09:50
  • 2343

EXTJS中的表格控件(一)

网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net mvc也不倡议使用传统的服务器控件,绑定数据需要自己拼表格,所以兼容各种语言的表格控件就变得流行起来。 本章我们主要学...
  • missysm586
  • missysm586
  • 2012年10月19日 15:17
  • 12592

Extjs 表格的样式设计

collapsible:true,设置表格是否可折叠 animCollapse:true,设置表格折叠的效果 iconCls:'grid',在表格的标题旁边添加css样式的图片 column...
  • Z_T_T
  • Z_T_T
  • 2015年08月25日 09:27
  • 1607

extjs4 grid 新增、删除、修改

删除与修改的操作,分两块进行。页面删除与后台删除。因此在页面上进行删除或修改后成功后,后台只传递一个SUCCESS标记,若后台同步成功,则在页面的store中执行删除或者修改。减少网络中的数据传输。 ...
  • dys1990
  • dys1990
  • 2012年04月21日 17:20
  • 30073

修改extjs中表格的默认高度

从网上找到的,经过调试测试,直接来进行这样的修改最好了,因为不仅可以设置了行高,还可以进一步控制单元格内的内容的在垂直上的对齐:  .x-grid3-row td,.x-grid3-summary-r...
  • silence1214
  • silence1214
  • 2011年06月05日 21:06
  • 5135
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJs删除表格记录.rowcontextmenu
举报原因:
原因补充:

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