View Full Version : DD tree > dataview = grid populate

30 Aug 2009, 5:31 PM
Right now I have a layout with a tree, dataview and a grid.

Ext.onReady(function() {

var newEventsDB = new Ext.data.JsonStore({
fields: [{
name: 'foo',
mapping: 'foo'
root: 'foo'

var gridforPanel = new Ext.grid.GridPanel({
store: newEventsDB,
columns: [{
header: 'name',
dataIndex: 'aname',
}, {
header: 'date',
dataIndex: 'ev_date',
renderer: Ext.util.Format.dateRenderer('m-d-Y')
}, {
header: 'ev',
dataIndex: 'events_idx',
}, {
header: 'event',
dataIndex: 'Label',
tbar: [{

text: 'Delete',
iconCls: 'delete',

handler: function() {
var m = gridforPanel.getSelectionModel().getSelected();
if (m.length > 0) {
Ext.MessageBox.confirm('Message', 'Trash it?', del);
} else {
Ext.MessageBox.alert('Message', 'I need something to delete!');

viewConfig: {
forceFit: true


var evGrid = new Ext.Panel({
// title: 'events list',
region: 'south',
height: 300,
split: true,
items: gridforPanel

var tree = new Ext.tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
ddGroup: 'eventDD',
containerScroll: true,
border: false,
region: 'west',
width: 160,
split: true,
dataUrl: 'tree.php',
root: {
nodeType: 'async',
text: 'event',
draggable: true,
id: 'src'


var view = new Ext.DataView({
itemSelector: 'div.thumb-wrap',
style: 'overflow:auto',
multiSelect: true,
enableDD: true,
ddGroup: 'eventDD',
notifyDrop:function(dd, e, node){console.log("");},
store: new Ext.data.JsonStore({
url: 'test.php',
autoLoad: true,
root: 'images',
id: 'animal_id',
fields: ['animal_id', 'aname', 'food_type', 'qty', 'lfeddate']
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" id="{aname}">', '<div class="thumb"><img src="slide/snakes/{aname}/thumb.jpg" class="thumb-img"></div>', '<span>{aname}</span>', '<span>{food_type}</span>', '<span>{lfeddate}</span></div>', '</tpl>')

var images = new Ext.Panel({
id: 'images',
region: 'center',
layout: 'fit',
items: view

var layout = new Ext.Panel({
layout: 'border',
title: 'add event matrix',
width: 800,
height: 1000,
items: [tree, images, evGrid]


});What I want to do is drop from the tree, to an item on the dataview, in the process, prompt for extra data if needed and then put the info and the grid, and eventually in to the databse from the store.

As of right now I am unable to drop items on the dataview. I searched around for a while and didn't find anything :( What do I need to do next?


1 Sep 2009, 1:55 AM
You will have to setup a drop zone on the dataview. The 3.0 API has excellent documentation on how to use a drop zone

1 Sep 2009, 1:39 PM
Thanks! I am sure I will need to used a DD someday.

I decided to do things a little different as my post was not promptly approved.

Thanks again!

1 Sep 2009, 2:33 PM
Chapters 11 and 12 of extjs in action will guide you through the implementation of DND with Dom nodes, dataviews, gridpanels and tree panels. It is 50% off (as low as $13.75 for the early access PDF). I am wrapping up chapter 12 today or tomorow.