关于Ext从Tree向Tree拖拽的问题

将TreePanel的数据向GridPanel中拖拽的功能!
Ext.onReady(function(){
	//创建tree 
	var tree = new Ext.tree.TreePanel({
		ddGroup          : 'gridDDGroup',
		title:'全部的组织机构',
	    animate:true, 
	    autoScroll:true,
	    loader:new Ext.tree.TreeLoader({
			dataUrl: apppath+'/back/jsp/organise/findalldepartment.html',
			listeners:{
			      'beforeload':function(treeloader,node){
			        	this.baseParams.depparentid = node.attributes.depid;
			       }
			}
		}),
		root: new Ext.tree.AsyncTreeNode({
			depid:157,iconCls:'depicon',
			text:'利星行集团',id:'157'
		}),
	    enableDD:true,
	    containerScroll: true,
	    border : true,
	    width  : 250,
	    height : 300,
	    region : 'west',
	    listeners:{'nodedrop':function(e){}},
	    dropConfig: {appendOnly:true}
	});
	tree.getRootNode().expand();
	//创建GridPanel
    var myData = [];
	
	var fields = [
	   {name: 'deplevel',mapping : 'deplevel'},
	   {name: 'depid'   ,mapping : 'depid'},
	   {name: 'depparentid',mapping : 'depparentid'},
	   {name: 'depparentname',mapping : 'depparentname'},
	   {name: 'text', mapping:'depname'}
	];

    // create the data store
    var gridStore = new Ext.data.JsonStore({
        fields     : fields,
        url	       : 'findallorgrolesbyroleid.html',
		baseParams : {ids:roledepid},
		autoLoad   : true
	});
	window.delRecord = function(value){
		var _sel = grid.getSelectionModel().getSelections();
		
		gridStore.remove(_sel[0]);
	}
	// Column Model shortcut array
	var cols = [
		{id : 'text', header: "单位名称", width: 100, sortable: true, dataIndex: 'text'},
		{header: "上级单位名称", width: 150, sortable: true, dataIndex: 'depparentname'},
		{header: "单位编号", width: 100, sortable: true, dataIndex: 'depid'},
		{header:"删除",width:100,sorttable:true,dataIndex:'depid',renderer:function(value){
			return '<a href="#" onClick="delRecord('+value+')">删除</a>';
		}}
	];
	
	// declare the source Grid
    var grid = new Ext.grid.GridPanel({
        store            : gridStore,
        columns          : cols,
		enableDragDrop   : true,
        stripeRows       : true,
        autoExpandColumn : 'text',
        width            : 325,
		region           : 'center',
        title            : '所管理的单位',
		selModel         : new Ext.grid.RowSelectionModel({singleSelect : true})
    });
	//Simple 'border layout' panel to house both grids
	var displayPanel = new Ext.Panel({
		title:'"'+rolename+'"-主管部门管理',
		width    : 650,
		height   : 300,
		layout   : 'border',
		tbar:['->','-',
			{
				text:'保存',
				iconCls:'db-icn-add',
				handler:function(){
					var _ids = new Array();
					for (var i = 0; i < grid.getStore().getCount(); i++) {
						var _rec = grid.getStore().getAt(i);
						_ids.push(_rec.get('depid'));
					}
					Ext.Ajax.request({
						url:'updateorgroles.html',
						params:{ids:_ids.join(','),rid:roleid},
						method:'POST',
						success:function(option,response){
							var _obj = Ext.decode(option.responseText);
							if(_obj.success){
								Ext.example.msg('系统提示', '保存管理单位权限成功! ');
							}else{
								Ext.example.msg('系统提示', '保存管理单位权限失败! ');
							}
						},
						failure:function(option,response){
							Ext.example.msg('系统提示', '保存管理单位权限失败! ');
							
						}
					});
				}
			},'-',
			{
				text:'树形列表方式查看',
				iconCls:'tree',
				handler:function(){
					var _form = document.createElement('form');
					document.body.appendChild(_form);
					_form.action = 'organiserolestree.jsp';
					_form.method = 'POST'
					var _ids = document.createElement('input');
					_ids.value = roledepid;
					_ids.name = 'depids';
					_ids.type = 'hidden';
					
					var _id = document.createElement('input');
					_id.value = roleid;
					_id.name = 'id';
					_id.type = 'hidden';
					
					var _name = document.createElement('input');
					_name.value = rolename;
					_name.name = 'name';
					_name.type = 'hidden';
					
					_form.appendChild(_ids);
					_form.appendChild(_id);
					_form.appendChild(_name);
					_form.submit();
					
				}
			}
			,'-',
			{
				text:'返回权限管理',
				iconCls:'btn-login-reset',
				handler:function(){
					location.href = apppath+'/back/jsp/roles/roles.html';
				}
			}
		],
		items    : [tree,grid],
		bbar    : [
			'->', // Fill
			{
				text    : '清除重新选择',
				iconCls	: 'bin_empty',
				handler : function() {
					gridStore.loadData(myData);
				}
			},'-',
			{
				text    : '刷新列表',
				iconCls	: 'refresh',
				handler : function() {
					gridStore.reload();
				}
			}
		]
	});
	
	var _view = new Ext.Viewport({
		items:[displayPanel],
		renderTo:Ext.getBody(),
		layout:'fit'
	});
	// 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 =  grid.body.dom;
	//
	var formPanelDropTarget = new Ext.dd.DropTarget(formPanelDropTargetEl, {
		ddGroup     : 'gridDDGroup',
		notifyEnter : function(ddSource, e, data) {
			grid.body.stopFx();
			grid.body.highlight();
		},
		notifyDrop  : function(ddSource, e, data){
			//这里添加选择的数据将选择的数据make a record 加到数据集里面
			var node = ddSource.dragData.node;
			//判断是否选择了同一个部门,不允许选择同一个部门!
			var _ishave = false;
			for (var i = 0; i < grid.getStore().getCount(); i++) {
				var _rec = grid.getStore().getAt(i);
				if(_rec.get('depid')==node.attributes.depid)
				{
					_ishave = true;
					break;
				}
			}
			if(_ishave){
				Ext.example.msg('系统提示', '您已经有管理这个" {0} "部门(单位)的权限了! ', node.attributes.text);
				return;
			}
			var Department = grid.getStore().recordType;
            var dep = new Department({
                deplevel: node.attributes.deplevel,
                depid: node.attributes.depid,
                depparentid: node.attributes.depparentid,
                depparentname: node.attributes.depparentname,
                text: node.attributes.text
            });
            gridStore.insert(0,dep);
			return(true);
		}
	});


});

你可能感兴趣的:(code,tree,ext,TreePanel)