2013년 10월 16일 수요일

Dragging-and-dropping nodes within a tree

1. Create a store and define some dummy inline data for the first tree:
var storeForTreeA = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Item 1",
leaf: true
},{
text: "Item 2",
leaf: true
},{
text: "Item 3",
leaf: true
},{
text: "Item 4",
leaf: true
}]
}
});

2. Create a tree and add the Ext.tree.plugin.TreeViewDragDrop plugin:
var treeA = Ext.create('Ext.tree.Panel', {
title: 'Tree One (drag from here)',
store: storeForTreeA,
width: 500,
height: 200,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop'
}
},
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

3. Define a second store for the second tree:
var storeForTreeB = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "Item 5",
leaf: true
}]
}
});

4. Add a second tree, also with the Ext.tree.plugin.TreeViewDragDrop
plugin defined:
var treeB = Ext.create('Ext.tree.Panel', {
title: 'Tree Two (drop here)',
width: 500,
height: 200,
store: storeForTreeB,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
enableDrop: true,
enableDrag: false,
allowContainerDrop: true
}
},
renderTo: Ext.getBody(),
style: 'margin: 50px'
});
5. Now, try clicking-and-dragging nodes from the first tree and dropping them into
the second.

댓글 없음:

댓글 쓰기