View Full Version : [Solved]Element not appended when dropped

3 Sep 2010, 2:23 AM
I will start this post off with a smile :D, there goes the smile ,Now let me start crying :((,
getting right to the point,
I have a button which i am dragging into the center region of viewport. When i drop the button it is not appended, i donno if my code is wrong or something but i could not find enough documentation about the method.
here goes my script

var myView = new Ext.Viewport({
renderTo: document.body,
title: 'Code Studio',
layout: 'border',
items: [{
title: 'ToolBox',
id: 'west-region-container',
margins: '5 5 0 0',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
layout: 'fit'
title: 'Code Designer',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
margins: '5 0 0 0'
title: 'Properties',
region: 'east',
items:new Ext.grid.PropertyGrid({
//closable: true,
source: {"(name)": "Properties Grid","grouping": false,"autoFitColumns": true,"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),"tested": false,"version": 0.01,"borderWidth": 1}
layout: 'fit',
margins: '5 5 0 0'
//make the button draggable
new Ext.dd.DragSource('foo');

//drop onto the Canvas
new Ext.dd.DropTarget('designer',{notifyDrop:function(ds,ev,data){this.el.appendChild(data)}});

and here goes my html

<form id="form1" runat="server">
<div id="food">
<asp:Button id="foo" runat="server" text="clickMe"></asp:Button>
Please let me know if my notifyDrop event function is written properly to append the dragged item to the center region.
Also In the property grid, How do i make it load the properties of Button
thanks to every developer who answers this post

3 Sep 2010, 10:11 PM
So, adding ,appending elements is very hard in Ext i suppose
~Bump :D

6 Sep 2010, 2:53 AM
You could use:

new Ext.dd.DragSource('foo', {
getDragData: function(ev){
return ev.getTarget();

new Ext.dd.DropTarget(Ext.getCmp('designer').body, {
notifyDrop: function(ds, ev, data){

ps. Did you read 5 Steps to Understanding Drag and Drop with Ext JS (http://www.sencha.com/blog/2009/09/13/5-steps-drag-and-drop-with-ext-js/)?

6 Sep 2010, 2:58 AM
5 steps to Understanding drag drop was awesome link you provided, this teached me a lesson that there are always other sources than the API,documentation.
Thank you very much
~ Solution Provided and Solved

6 Sep 2010, 3:32 AM
bumping this with another question

//table is clicked

function createTable(_rows,_columns){
var sHtml = "<table style='width:100%'>";
for(i=1;i<=_rows;i++)//for every row
//create a row
sHtml += "<tr>";
//create columns
sHtml += "<td>Row "+i+" TableData "+j+"</td>";//insert dummy data
sHtml +="</tr>";
sHtml+= "</table>";
return sHtml;

Here i have coupled both Jquery and Ext. When i click the button with id 'toolbox-table' it calls method createTable with arguments as rows and columns. Method creates table and returns the structure, But when i click the button i don't get the desired result.here is the error i get

GET(el) is null

here is the error http://deeptechtons.net/images/error1.png

6 Sep 2010, 3:35 AM
You are appending HTML and not a DOM node, so you should be using createChild instead of appendChild.

ps. Why would you use jQuery instead of Ext:

Ext.get('toolbox-table').on('click', function(){

6 Sep 2010, 3:53 AM
ps. Why would you use jQuery instead of Ext:

Trying something different to see what both the frameworks create when put to gather :D, I am good at JQuery but learning is always fun.That is why i dipped to Extjs when i saw the samples.
but doesn't appendChild accept a String as child to be inserted,

api docs says:

el : String/HTMLElement/Array/Element/CompositeElement

6 Sep 2010, 4:04 AM
Yes, but a 'String' parameter for appendChild means the id of an element.

6 Sep 2010, 4:08 AM
So is your above statement Global in reference with Extjs ? if so that means where ever i see String as parameter for method then it means string 'id' of the html element

6 Sep 2010, 4:11 AM
No, only if you see a combination of String/HTMLElement/Element then String means element id.

6 Sep 2010, 4:20 AM
Now i Understand :D
Also now in the above code, Is it possible to make the Table draggable without a drop target but withinn the Designer canvas[center region].
Also does Ext provide class to resize the table data [ td within the the table].

Now that i have done all the needed stuff , how will i save the information. I can't send the raw html i suppose :(

6 Sep 2010, 4:26 AM
1. To make the table dragable within the designer the designer would have to be both a drag source and target.

2. Have a look at Ext.Resizer.