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

最新推荐文章于 2024-07-25 19:54:46 发布

般若Neo

最新推荐文章于 2024-07-25 19:54:46 发布

阅读量6.4k

点赞数 2

分类专栏： # ExtJS 文章标签： extjs extjs5 鼠标拖拽Grid行

本文链接：https://blog.csdn.net/hwhsong/article/details/50594619

版权

本文介绍了如何在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