ExtJS5 - 用鼠标拖拽Grid行进行排序及选择

本文介绍了如何在ExtJS5中使用Ext.grid.plugin.DragDrop插件实现Grid行的上下移动和在多个Grid之间相互移动行数据。通过设置相同的组名,可以确保行数据在具有相同Model的Grid之间正确移动。
摘要由CSDN通过智能技术生成

对Grid中的数据进行手动排序,以及在多个Grid之间相互移动行数据是比较常见的业务逻辑。利用Ext.grid.plugin.DragDrop类,可方便地实现这两个效果。


1、实现Grid行的上下移动

Ext.onReady(function() {
	var proStore = Ext.create("Ext.data.Store", {
		fields: ["code", "name", "num"],
		data: [
			["#001", "iPhone6", 100],
			["#002", "iPhone6 Plus", 80],
			["#003", "Mi Note4", 99],
			["#004", "Galaxy S6", 75],
			["#005", "Smartisan T2", 68]
		]
	});
	
	Ext.create("Ext.grid.Panel", {
		title: "可用鼠标拖拽行数据的Grid",
		width: 400,
		margin: 10,
		border: true,
		store: proStore,
		columns: [{
			text: "产品编号",
			dataIndex: "code",
			flex: 1
		}, {
			text: "产品名称",
			dataIndex: "name",
			flex: 1
		}, {
			text: "产品数量",
			dataIndex: "num",
			flex: 1
		}],
		viewConfig: {
			plugins: {
				ptype
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值