Results 1 to 4 of 4

Thread: Create a div on drop action

  1. #1
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78

    Default Create a div on drop action

    I have a viewport with a tree panel and a panel inside. I need to drag a node from the tree and drop it on the panel; on the drop action I wanna create a div in the panel that I can move around. I'm following and example from Saki; it create statically the divs that can be moved in the panel. I wanna add other divs dinamically on node drop, but I think that isn't possibile...anyone can help me?

    here there is my code
    PHP Code:

    datFed 
    Ext.extend(datFedUi, {
        
    initComponent: function() {
            
    datFed.superclass.initComponent.call(this);
            
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
        },
        
        
    divs:[
                 {
    x:20,  y:20i:'add'}
                ,{
    x:80,  y:20}
                ,{
    x:140y:20}
                ,{
    x:200y:20}
                ,{
    x:20,  y:80}
                ,{
    x:80,  y:80}
                ,{
    x:140y:80}
                ,{
    x:200y:80}
            ]

            
    // save state on these events
            
    ,stateEvents:['move','resize','itemdrag']

            
    // return also item coordinates as part of state
            
    ,getState:function() {
                
    //var state = Ext.Window.prototype.getState.call(this);
                
    var state Ext.Window.prototype.getState.call(this);
                
    state.divs this.divs;
                return 
    state;
            }

            
    // item creation template
            
    ,tpl: new Ext.XTemplate(
                 
    '<tpl for="divs">'
                
    ,'<div id="item-{#}" class="item draggable" style="top:{y}px;left:{x}px;"><img src="images/{i}.png"></div>'
                
    ,'</tpl>'
            
    )
        
        ,
    afterRender:function() {
                
    datFedUi.superclass.afterRender.apply(thisarguments);
                

                
    this.tpl.overwrite(this.bodythis);
                
    // setup D&D
                
    var items this.body.select('div.draggable');

                
    // loop through draggable items
                
    items.each(function(elceindex) {

                    
    // create DDProxy
                    
    el.dd = new Ext.dd.DDProxy(el.dom.id'group');

                    
    // configure the proxy
                    
    Ext.apply(el.dd, {
                         
    datFed:this
                        
    ,itemIndex:index

                        
    // runs on drag start
                        // create nice proxy and constrain it to body
                        
    ,startDrag:function(xy) {
                            var 
    dragEl Ext.get(this.getDragEl());
                            var 
    el Ext.get(this.getEl());

                            
    dragEl.applyStyles({border:'','z-index':this.datFed.lastZIndex 1});
                            
    dragEl.update(el.dom.innerHTML);
                            
    dragEl.addClass(el.dom.className ' dd-proxy');

                            
    this.constrainTo(this.datFed.body);
                        } 
    // eo function startDrag

                        // runs on drag end
                        // save new position of item and fire itemdrag event to save state
                        
    ,afterDrag:function() {
                            var 
    el Ext.get(this.getEl());
                            var 
    div this.datFed.divs[this.itemIndex];
                            
    div.el.getLeft(true);
                            
    div.el.getTop(true);
                            
    this.datFed.fireEvent('itemdrag'this);
                        } 
    // eo function afterDrag

                    
    }) // eo apply

                
    }, this); // eo each 
                
                
    var bbb=this.body;
                var 
    dd = new Ext.dd.DropTarget(bbb, {
                     
    ddGroup:'treeDD'
                    
    ,notifyDrop:function(ddenode) {

                     
    //I don't know how to create a new div here

                        
    return true;
                    }
                })}
    });
    Ext.reg('datFed'datFed); 

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78

    Default

    is the notifyDrop function the wrong place to put the code?

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78

    Default

    I found how to add and element to the array, but it doesn't exist in the notifyDrop, so I cannot append it on drop... how can I resolve it?

  4. #4
    Sencha User
    Join Date
    Nov 2010
    Location
    Italy
    Posts
    78

    Default

    I modified my code and now it works... the strange thing is that it work good in Debug mode, but not when I reload the page without the debugger. I noticed that my object are created before the garbage collector call

    PHP Code:
                var bbb=this.body;
                var 
    dd = new Ext.dd.DropTarget(bbb, {
                     
    ddGroup:'treeDD'
                    
    ,notifyDrop:function(ddenode) {
                        
    alert(kkk[1].x);
                        
    kkk.push({x:210y:250i:'ABR'});
                        
    kkk.push({x:299y:299i:'BSH'});
                        return 
    true;
                    }
                })} 
    Note: kkk is the variable that contains the div (I put var kkk=this.div before the template overwrite)

Similar Threads

  1. How to create XML File in Action Class?
    By vms.saran in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 12 Jul 2010, 6:52 AM
  2. Drag 'n' Drop in scrolling div results in invalid drop
    By kadser in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 3 May 2010, 4:36 AM
  3. RESTful store and Create action
    By g2mac in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 23 Jul 2009, 3:24 AM
  4. How to create a image with button action?
    By msuresh in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 14 Jan 2008, 10:36 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •