View Full Version : TreePanel to TreeGrid Drag & Drop

Fallen Zen
6 Apr 2010, 1:37 PM

I have a problem creating Tree Panel to Tree Grid Drag & Drop with these conditions:

1. You can only move the lowest child from the left tree, no dragging "folders" (I can set DropAble and draggable if necessary).
2. When you move an item from the left tree to the right tree grid, it's copied with all the parent nodes (is it possible? The original structure must be maintained. If you move everything, you'll have exactly the same structure on the right, just with a grid).
3. Is it possible to not have a root visible on the right tree grid and still being able to drop an item to it?
4. If I have an empty tree grid, just with a root visible I'm getting some strange behavior while D&D, empty items are added to the dragged element, etc.

P.S. Don't worry about items names in both panel, they're placeholders.

Here's my current code, it's based on Desktop example from the ExtJS site:

MyDesktop.Edit = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Edycja kosztorysu',
handler : this.createWindow,
scope: this

createWindow : function(desktop, dataRow){
var win = desktop.getWindow('edit-estimates-win-' + dataRow.id);
var name = 'Temat: "' + dataRow.topic + '" Nazwa: "' + dataRow.name + '"';
win = desktop.createWindow({
id: 'edit-estimates-win-' + dataRow.id,
title: name,
width: 1000,
height: 480,
iconCls: 'icon-estimates',
shim: false,
animCollapse: false,
border: false,
constrainHeader: true,
layout: 'border',
items: [
new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
rootVisible: false,
animate: true,
region: 'west',
width: 200,
title: 'S?owniki',
enableDD: true,
containerScroll: true,
dataUrl: 'js/Estimates/dictionary.json',
requestMethod: 'GET',
root: {
nodeType: 'async',
text: 'Wybierz element',
draggable: false,
id: 'src'
new Ext.ux.tree.TreeGrid({
title: 'Oferta',
width: 500,
height: 300,
enableDD: true,
region: 'center',
header: 'Nazwa',
dataIndex: 'name',
width: 230
header: 'Szczegó?y',
width: 100,
dataIndex: 'details'
header: 'Opis',
width: 150,
dataIndex: 'desc'
dataUrl: 'js/Estimates/offer.json',
requestMethod: 'GET'

Here's how it looks like now:


Thanks for any tip, I'm new to ExtJS but it blew my mind already :)

Fallen Zen
7 Apr 2010, 12:30 AM

Fallen Zen
7 Apr 2010, 8:59 AM
No suggestions, on any of my 4 questions / problems?

11 May 2010, 11:45 PM
Have you already solved your problem. Especially problem 2. I got the same problem.

Fallen Zen
12 May 2010, 12:16 AM
Unfortunately, no.