Ext中从grid 到tree的拖拽

newlethe

浏览: 83819 次
性别:
来自: 武汉

最近访客更多访客>>

壹亻憔悴

zhangyu_2100

hq185fvl

zzy_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT json 数据结构工作

// 使用一个Json数据结构作为tree的本地数据源     
var nodes = [     
    {'text' : 'SY0706', 'id' : 1, 'leaf' : false, 'cls' : 'folder', 'children' : [     
        {'text' : '1', 'id' : 11, 'leaf' : false, 'cls' : 'folder', 'children' : [   
            {'text' : '01', 'id' : 111, 'leaf' : true, 'cls' : 'file'},   
            {'text' : '02', 'id' : 112, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '03', 'id' : 113, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '04', 'id' : 114, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '05', 'id' : 115, 'leaf' : true, 'cls' : 'file'}     
        ]},    
        {'text' : '2', 'id' : 12, 'leaf' : false, 'cls' : 'folder', 'children' : [    
            {'text' : '06', 'id' : 121, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '07', 'id' : 122, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '08', 'id' : 123, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '09', 'id' : 124, 'leaf' : true, 'cls' : 'file'},     
            {'text' : '10', 'id' : 125, 'leaf' : true, 'cls' : 'file'}     
        ]}   
    ]}    
];    
  
// 拖拽时需要用到的函数，用来处理添加树结点   
/*  
 * TreeNode     node        :   tree上的目标结点  
 * TreeNode     refNode     :   目标结点的子结点，用于定位新添加的结点  
 * Record Array selections  :   从grid中选取的记录数组     
 */  
var ddFunction = function(node, refNode, selections) {   
    for(var i = 0; i < selections.length; i ++) {   
        var record = selections[i];   
        node.insertBefore(new Tree.TreeNode({   
            text: record.get('text'),   
            id: record.get('id'),   
            leaf: record.get('leaf'),   
            cls: record.get('cls')   
        }), refNode);   
    }   
}   
  
// 建一棵树，并将其设置到tgDD拖动组中   
var Tree = Ext.tree;     
  
var tree = new Tree.TreePanel({   
    renderTo: 'tree',   
    animate: true,     
    loader: new Tree.TreeLoader(),   
    lines: true,     
    selModel: new Ext.tree.MultiSelectionModel(),     
    containerScroll: false,   
    autoHeight: true,   
    root: new Tree.AsyncTreeNode({     
        text: 'BUAA',     
        draggable: false,     
        id: 0,     
        children: nodes,   
        expanded: true  
    }),   
    enableDD: true,   
    ddGroup: "tgDD",   
    listeners: {   
        // 监听beforenodedrop事件，主要就是在这里工作   
        // 参考“http://www.iteye.com/topic/155272”中的讨论   
        beforenodedrop: function(dropEvent) {   
            var node = dropEvent.target;    // 目标结点   
            var data = dropEvent.data;      // 拖拽的数据   
            var point = dropEvent.point;    // 拖拽到目标结点的位置   
            // 如果data.node为空，则不是tree本身的拖拽，而是从grid到tree的拖拽，需要处理   
            if(!data.node) {   
                switch(point) {   
                    case 'append':   
                        // 添加时，目标结点为node，子结点设为空   
                        ddFunction(node, null, data.selections);   
                        break;   
                    case 'above':   
                        // 插入到node之上，目标结点为node的parentNode，子结点为node   
                        ddFunction(node.parentNode, node, data.selections);   
                        break;   
                    case 'below':   
                        // 插入到node之下，目标结点为node的parentNode，子结点为node的nextSibling   
                        ddFunction(node.parentNode, node.nextSibling, data.selections);   
                        break;   
                }   
            }   
        }   
    }   
});   
  
// grid的数据源   
var data = [     
    ['11', 211, true, 'file'],   
    ['12', 212, true, 'file'],   
    ['13', 213, true, 'file'],   
    ['14', 214, true, 'file'],   
    ['15', 215, true, 'file'],   
    ['16', 221, true, 'file'],   
    ['17', 222, true, 'file'],   
    ['18', 223, true, 'file'],   
    ['19', 224, true, 'file'],   
    ['20', 225, true, 'file']   
];   
var store = new Ext.data.Store({   
    reader: new Ext.data.ArrayReader({}, [   
       {name: 'text'},   
       {name: 'id'},   
       {name: 'leaf'},   
       {name: 'cls'}   
    ])   
});   
store.loadData(data);   
// 建一个grid，并设置到tgDD拖拽组中   
var Grid = Ext.grid;   
  
var model = new Grid.ColumnModel([   
    {header: "text", width: 50, sortable: true, dataIndex: 'text'},   
    {id:'id', header: "id", width: 50, sortable: true, dataIndex: 'id'},   
    {header: "leaf", width: 50, sortable: true, dataIndex: 'leaf'},   
    {header: "cls", width: 50, sortable: true, dataIndex: 'cls'}   
]);   
  
  
var grid = new Grid.GridPanel({   
    renderTo: 'grid',   
    ds: store,   
    cm: model,   
    sm: new Grid.RowSelectionModel(),   
    autoHeight: true,   
    enableDragDrop: true,   
    ddGroup: "tgDD"  
});  
 // 使用一个Json数据结构作为tree的本地数据源
	// 参考“http://ccmv.iteye.com/admin/blogs/154049”
	var nodes = [  
		{'text' : 'SY0706', 'id' : 1, 'leaf' : false, 'cls' : 'folder', 'children' : [  
			{'text' : '1', 'id' : 11, 'leaf' : false, 'cls' : 'folder', 'children' : [
				{'text' : '01', 'id' : 111, 'leaf' : true, 'cls' : 'file'},
				{'text' : '02', 'id' : 112, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '03', 'id' : 113, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '04', 'id' : 114, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '05', 'id' : 115, 'leaf' : true, 'cls' : 'file'}  
			]}, 
			{'text' : '2', 'id' : 12, 'leaf' : false, 'cls' : 'folder', 'children' : [ 
				{'text' : '06', 'id' : 121, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '07', 'id' : 122, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '08', 'id' : 123, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '09', 'id' : 124, 'leaf' : true, 'cls' : 'file'},  
				{'text' : '10', 'id' : 125, 'leaf' : true, 'cls' : 'file'}  
			]}
		]} 
	]; 
	
	// 拖拽时需要用到的函数，用来处理添加树结点
	/*
	 * TreeNode 	node 		:	tree上的目标结点
	 * TreeNode 	refNode 	:	目标结点的子结点，用于定位新添加的结点
	 * Record Array	selections	:	从grid中选取的记录数组	
	 */
	var ddFunction = function(node, refNode, selections) {
		for(var i = 0; i < selections.length; i ++) {
			var record = selections[i];
			node.insertBefore(new Tree.TreeNode({
				text: record.get('text'),
				id: record.get('id'),
				leaf: record.get('leaf'),
				cls: record.get('cls')
			}), refNode);
		}
	}
	
	// 建一棵树，并将其设置到tgDD拖动组中
	var Tree = Ext.tree;  
	
	var tree = new Tree.TreePanel({
		renderTo: 'tree',
		animate: true,  
		loader: new Tree.TreeLoader(),
		lines: true,  
		selModel: new Ext.tree.MultiSelectionModel(),  
		containerScroll: false,
		autoHeight: true,
		root: new Tree.AsyncTreeNode({  
			text: 'BUAA',  
			draggable: false,  
			id: 0,  
			children: nodes,
			expanded: true
		}),
		enableDD: true,
		ddGroup: "tgDD",
		listeners: {
			// 监听beforenodedrop事件，主要就是在这里工作
			// 参考“http://www.iteye.com/topic/155272”中的讨论
			beforenodedrop: function(dropEvent) {
				var node = dropEvent.target;	// 目标结点
				var data = dropEvent.data;	    // 拖拽的数据
				var point = dropEvent.point;	// 拖拽到目标结点的位置
				// 如果data.node为空，则不是tree本身的拖拽，而是从grid到tree的拖拽，需要处理
				if(!data.node) {
					switch(point) {
						case 'append':
							// 添加时，目标结点为node，子结点设为空
							ddFunction(node, null, data.selections);
							break;
						case 'above':
							// 插入到node之上，目标结点为node的parentNode，子结点为node
							ddFunction(node.parentNode, node, data.selections);
							break;
						case 'below':
							// 插入到node之下，目标结点为node的parentNode，子结点为node的nextSibling
							ddFunction(node.parentNode, node.nextSibling, data.selections);
							break;
					}
				}
			}
		}
	});
	
	// grid的数据源
	var data = [  
		['11', 211, true, 'file'],
		['12', 212, true, 'file'],
		['13', 213, true, 'file'],
		['14', 214, true, 'file'],
		['15', 215, true, 'file'],
		['16', 221, true, 'file'],
		['17', 222, true, 'file'],
		['18', 223, true, 'file'],
		['19', 224, true, 'file'],
		['20', 225, true, 'file']
	];
	var store = new Ext.data.Store({
		reader: new Ext.data.ArrayReader({}, [
	       {name: 'text'},
	       {name: 'id'},
	       {name: 'leaf'},
	       {name: 'cls'}
    	])
	});
	store.loadData(data);
	// 建一个grid，并设置到tgDD拖拽组中
	var Grid = Ext.grid;
	
	var model = new Grid.ColumnModel([
	    {header: "text", width: 50, sortable: true, dataIndex: 'text'},
	    {id:'id', header: "id", width: 50, sortable: true, dataIndex: 'id'},
	    {header: "leaf", width: 50, sortable: true, dataIndex: 'leaf'},
	    {header: "cls", width: 50, sortable: true, dataIndex: 'cls'}
	]);
	
	
	var grid = new Grid.GridPanel({
		renderTo: 'grid',
		ds: store,
		cm: model,
		sm: new Grid.RowSelectionModel(),
		autoHeight: true,
		enableDragDrop: true,
		ddGroup: "tgDD"
	});

分享到：

Ext.grid.GridPanel中的符合条件的某行不能 ... | Ext.grid.ColumnModel 后期通过setEditor ...

2011-03-15 09:23
浏览 1489
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext中从grid 到tree的拖拽

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ext中从grid 到tree的拖拽

评论

发表评论

相关推荐

ExtJs grid中常用属性 总结

ExtJS 中xtype和 class对照表

EXTjs grid双层表头的实现 (源代码和示例)

Extjs Grid相关组件及属性

EXT的formpanel中的横向排列布局

EXT中将grid的sm选择项动态添加到ComboBox

EditorGridPanel组件中根据条件取消某一行的编辑状态

Ext.grid.GridPanel中的符合条件的某行不能选择

Ext.grid.ColumnModel 后期通过setEditor设置editor

Ext.ux.form.FileUploadField 重置的问题

EXT 树的配置详细属性介绍

Ext.data.Store

ext中常见的几种布局布局Layout

如何将string类型的数据如何显示在Ext的datefield中

Ext DateField控件 - 只选择年月

动态修改Ext控件的readOnly属性

EXT表单组件常见属性介绍（三）

EXT表单组件常见属性介绍（二）

EXT表单组件常见属性介绍（一）

ext的 renderer的function参数详细介绍

最近访客更多访客>>

ExtJs grid中常用属性总结