PDA

View Full Version : I need take a complete div tag



elier
10 May 2007, 10:59 AM
Hi guys,

I'm trying to take a complete source for div tag, but I can't do it.

HTML
<div class="block" id="b3">
<div>Block title</div>
<div>Block text</div>
</div>


JScript
var b3 = Ext.get("b3");

b3.dom.innerHTML Only get the div inside:
<div>Block title</div>
<div>Block text</div>

But I want to take the complete div, from <div class="block" id="b3">


I think that it's very simple, but I can't find it :(

Thanks

tryanDLS
10 May 2007, 11:16 AM
That's what innerHTML means. You could look at innerHTML property of the b3 div's parent.

elier
10 May 2007, 1:49 PM
That's what innerHTML means. You could look at innerHTML property of the b3 div's parent.

Yes, of course, the problem is that the parent has many other div inside and I only want the b3 div.

So I need the way to take it from him self, something like take the complete HTML code for a Ext.Element

I'm new with Ext, so excuse me any nonsense.

tryanDLS
10 May 2007, 1:57 PM
What are you trying to accomplish that you need the entire HTML fragment?

jsakalos
10 May 2007, 2:01 PM
If you know that you will need some complete div enclose it in another div (container). It does no harm.

elier
11 May 2007, 10:59 AM
If you know that you will need some complete div enclose it in another div (container). It does no harm.

Thanks, maybe is a solutions ..

elier
11 May 2007, 11:08 AM
What are you trying to accomplish that you need the entire HTML fragment?

Hi guys,

I prepared a example in which I'm working, there is attached: DD-Layout.rar, all dependency of Ext js may be in the same directory, check DD-Layout.html


Ext.onReady(function() {

var b3 = Ext.get("b3");

var ds = new Ext.dd.DragSource("b3", {dragData:{el: b3}});
ds.scroll = false;

var droptarget = new Ext.dd.DropTarget("b7");


droptarget.notifyDrop=function(dd, e, data){

var div = Ext.get(e.target);

// this not work
Ext.get(div.dom.parentNode).insertHTML("afterEnd", data.el.dom.parentNode.innerHTML);

// variant
//div.dom.parentNode.innerHTML += data.el.dom.parentNode.innerHTML;

// though this work
//Ext.get(div.dom.parentNode).remove();
//Ext.get(div.dom.parentNode).highlight();

data.el.remove();

return true;
}

});


I don't know why this not work:
Ext.get(div.dom.parentNode).insertHTML("afterEnd", data.el.dom.parentNode.innerHTML);
if others functionality work.

---

In general I want to design a DD-Layout, where I can have some blocks (DIV) that I can organize how I want, like iGoogle with their gadget.

I studied the Grid to know how are implemented the drag & drop of columns,
maybe the DD-Layout can implement their drag & drop like Grip columns (that I can't understand very well yet).

So "b3" could be any block (div) that I want to drag and drop below to any other block.


I will happy if you can give me any help or idea to implement DD-Layout,
maybe can be other component to Ext.


Thanks, Elier

jsakalos
11 May 2007, 11:11 AM
I just give you a direction to look at: DragZone, DropZone, DragSource, DropTarget and Registry.

elier
11 May 2007, 11:37 AM
I just give you a direction to look at: DragZone, DropZone, DragSource, DropTarget and Registry.

Thanks you,

Yes, I had seen that in the Grid, HeaderDragZone inherits from DragZone and HeaderDropZone inherits from DropZone, I'm trying to understand how this work in the Grid to implement something like this.

Regards, Elier