Extjs 把grid header 拖拽到window外，就删除该列

aj3423 2008-12-29 10:20:29

如图，grid 2 有3个列，如果我拖动column 2 到窗口外(即浏览器剩余空白部分)，这个column2 就将被删除，只剩下 column 1 和column 3

删除列我会，但是如何响应那个事件，搞定后再加200分，谢谢。

...全文

310 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

Ghost_520 2009-01-05

打赏
举报

这是我写的一段 gridpanle 中拖拽表格内容的例子，在 new Ext.dd.DropTarget 事件中我可以得到 Drop 放下的 notifyDrop （事件）的
var selectedRecord = ddSource.dragData.selections[0]; 获得拖拽后的表格内容，并填充到本文框中，希望这个例子对你有用，你把我的代码copy 下来运行出来就知道是什么意思了！



<%@ page language="java" pageEncoding="UTF-8"%>





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="true">

  <head>

    <html:base />

    

    <title>DropTree.jsp</title>



	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">    

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<link rel="stylesheet" type="text/css" href="ext2.2/resources/css/ext-all.css" />

	<link rel="stylesheet" type="text/css" href="ext2.2/examples/shared/examples.css" />

	<script type="text/javascript" src="ext2.2/adapter/ext/ext-base.js"></script>

	<script type="text/javascript" src="ext2.2/ext-all-debug.js"></script>	

	

  </head>

  <script>

  	Ext.onReady(function(){

  

    var myData = {

		records : [

			{ name : "Record 0", column1 : "0", column2 : "0" },

			{ name : "Record 1", column1 : "1", column2 : "1" },

			{ name : "Record 2", column1 : "2", column2 : "2" },

			{ name : "Record 3", column1 : "3", column2 : "3" },

			{ name : "Record 4", column1 : "4", column2 : "4" },

			{ name : "Record 5", column1 : "5", column2 : "5" },

			{ name : "Record 6", column1 : "6", column2 : "6" },

			{ name : "Record 7", column1 : "7", column2 : "7" },

			{ name : "Record 8", column1 : "8", column2 : "8" },

			{ name : "Record 9", column1 : "9", column2 : "9" }

		]

	};





	// Generic fields array to use in both store defs.

	var fields = [

	   {name: 'name', mapping : 'name'},

	   {name: 'column1', mapping : 'column1'},

	   {name: 'column2', mapping : 'column2'}

	];

	

    // create the data store

    var gridStore = new Ext.data.JsonStore({

        fields : fields,

		data   : myData,

		root   : 'records'

    });

	



	// Column Model shortcut array    

    var column = new Ext.grid.ColumnModel([    	 

    	{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name',ddGroup : 'gridDDGroup'},

	//	{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},

		{ id :'column1',header: "column1", width: 50, sortable: true, dataIndex: 'column1'},

		{ id :'column1',header: "column2", width: 50, sortable: true, dataIndex: 'column2'}

    ]);

    

    column.on('ddGroup',function(grid,oldIndex,newIndex){ 

		//监听的具体内容 

		alert(); 

	});

    

	// declare the source Grid

    var grid = new Ext.grid.GridPanel({		

        ddGroup			 : 'gridDDGroup',

        store            : gridStore,

        cm          : column,

		enableDragDrop   : true,

        stripeRows       : true,

        autoExpandColumn : 'name',

        width            : 325,

		region           : 'west',

        title            : 'Data Grid',

		selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})

    });



	



    grid.columnDrag.afterInvalidDrop = function(e){

        if (e != undefined) {

            //alert(_this.draggingHeader);

            alert('in');

        } else {

            alert('out');

        }

        var v = this.view;

        setTimeout(function(){

        v.headersDisabled = false;

        }, 50);

    };



	

	

	// Declare the text fields.  This could have been done inline, is easier to read

	// for folks learning :)

	var textField1 = new Ext.form.TextField({

		fieldLabel : 'Record Name',

		name       : 'name'

	});

	

	

	var textField2 = new Ext.form.TextField({

		fieldLabel : 'Column 1',

		name       : 'column1'

	});

	

	

	var textField3 = new Ext.form.TextField({

		fieldLabel : 'Column 2',

		name       : 'column2'

	});	

	

	

	// Setup the form panel 

	var formPanel = new Ext.form.FormPanel({

		region     : 'center',

		title      : 'Generic Form Panel',

		bodyStyle  : 'padding: 10px; background-color: #DFE8F6',

		labelWidth : 100,

		width      : 325,

		items      : [

			textField1,

			textField2,

			textField3

		]

	});





	

	//Simple 'border layout' panel to house both grids

	var displayPanel = new Ext.Panel({

		width    : 650,

		height   : 300,

		layout   : 'border',

		renderTo : 'panel',

		items    : [

			grid,

			formPanel

		],

		bbar    : [

			'->', // Fill

			{

				text    : 'Reset Example',

				handler : function() {

					//refresh source grid

					gridStore.loadData(myData);

					formPanel.getForm().reset();

				}

			}

		]

	});

	



	// used to add records to the destination stores

	var blankRecord =  Ext.data.Record.create(fields);



	/****

	* Setup Drop Targets

	***/

	

	// This will make sure we only drop to the view container

	var formPanelDropTargetEl =  formPanel.body.dom;

	

	var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {

		ddGroup     : 'gridDDGroup',

		notifyEnter : function(ddSource, e, data) {

	//		alert();

			//Add some flare to invite drop.

			formPanel.body.stopFx();

			formPanel.body.highlight();

		},

		notifyDrop  : function(ddSource, e, data){

			alert(e);

			// Reference the record (single selection) for readability

			var selectedRecord = ddSource.dragData.selections[0];						

						

			// Load the record into the form

			formPanel.getForm().loadRecord(selectedRecord);	

						

			// Delete record from the grid.  not really required.

		//	ddSource.grid.store.remove(selectedRecord);	



			return(true);

		}

	}); 	

	



});

  </script>

  <body>

    <div id="panel"></div>    

  </body>

</html>

aj3423 2009-01-04

打赏
举报

如果现在只要拖出这个grid 的话就删除。。可以怎么写。。再加100分。。谢谢。。

aj3423 2009-01-04

打赏
举报

多谢 Ghost

[Quote=引用 10 楼 Ghost_520 的回复:]
在触发 afterInvalidDrop 这个事件，即放下 Header 的时候，在事件里面获得 Header 的 dataIndex ，或者是 id
[/Quote]

afterInvalidDrop里貌似得不到dataIndex或者id，什么都得不到，只有一个event

我只能在开始拖动时候记下拖动的Header，即getDragData里_this.draggingHeader = h.textContent;

Ghost_520 2009-01-04

打赏
举报

你这样判断能不能成功？如果可以成功的话那比我写的要简单，我写的就是在 Drop 放下 Header 的时候来检测 newIndex 是否在 ColumnModel 中，是一

个 moved(记不清楚了) 这个时间来检测 function(this,oldIndex , newIndex ) ，不过貌似这个只能在grid 内拖动时候判断。我说下自己的一点意见，

你也可以按照我这种思路写试试，在触发 afterInvalidDrop 这个事件，即放下 Header 的时候，在事件里面获得 Header 的 dataIndex ，或者是 id ，当然

你在定义 columnModel 的时候要给每个 header 定义 id 和 dataIndex ，这样才能做到用 id 来区分。你在 Drag 的时候，记下你拖动的 header 的

dataIndex 或者是 id ， Drop 的时候重新获得一下 dataIndex 或者是 id ，判断两次是否一致。

wjfmail 2009-01-04

打赏
举报

学习.

aj3423 2009-01-04

打赏
举报

现在是这样判断，如果谁有更好的办法，分数照给。。

_this.resultGrid.on('render', function(grid) {

	_this.resultGridView.columnDrag.getDragData = function(e){

		var t = Ext.lib.Event.getTarget(e);

		var h = this.view.findHeaderCell(t);

		if(h){

			_this.draggingHeader = h.textContent;

			return {ddel: h.firstChild, header:h};

		}

		return false;

	};

	_this.resultGridView.columnDrag.afterInvalidDrop = function(e){

		if (e != undefined) {

			//alert(_this.draggingHeader);

			alert('in');

		} else {

			alert('out');

		}

		var v = this.view;

		setTimeout(function(){

		v.headersDisabled = false;

		}, 50);

	};

}

Ghost_520 2008-12-31

打赏
举报

LZ

你等我，我马上帮你把事件写好，分要留给我哟。。

aj3423 2008-12-31

打赏
举报

搞定后再加500分谢谢了。。

Ghost_520 2008-12-31

打赏
举报

我自己写了一下，gridpanel 最多只能扩展 row 的拖拽事件，貌似并不能扩展 columnModel 的拖拽事件。不过在做的过程中，有的一些思路。

你说：“ 删除列我会，但是如何响应那个事件，搞定后再加200分，谢谢。” 那个其实的化你就可以写成 columnModel 的拖拽事件，当时先 drop 的情况

下，你来检测一下 column 是不是放到了 gridPanel 中，如果不是就把那列删除，是的话则不进行操作。只不过最难点就是在扩展 columnModel 的拖拽事件，

望 ext 牛人来做了。

关注中。。。。。