Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: [Solved]Element not appended when dropped

  1. #1
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Arrow [Solved]Element not appended when dropped

    I will start this post off with a smile , 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
    Code:
    var myView = new Ext.Viewport({
        renderTo: document.body,
        title: 'Code Studio',
        layout: 'border',
        items: [{
            title: 'ToolBox',
            id: 'west-region-container',
            region:"west",
            contentEl:'form1',
            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',
            id:'designer',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout:'fit',
            collapsible:true,
            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}
                        }),
            width:200,
            split:true,
            collapsible:true,
            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
    HTML Code:
    <body>
        <form id="form1" runat="server">
            <div id="food">
                <asp:Button id="foo" runat="server" text="clickMe"></asp:Button>
            </div>
        </form>
    </body>
    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
    Last edited by gokujames; 6 Sep 2010 at 2:59 AM. Reason: Problem solved
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  2. #2
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Default

    So, adding ,appending elements is very hard in Ext i suppose
    ~Bump
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    You could use:
    Code:
    new Ext.dd.DragSource('foo', {
        getDragData: function(ev){
            return ev.getTarget();
        }
    });
    
    new Ext.dd.DropTarget(Ext.getCmp('designer').body, {
        notifyDrop: function(ds, ev, data){
            this.el.appendChild(data)
        }
    });
    ps. Did you read 5 Steps to Understanding Drag and Drop with Ext JS?

  4. #4
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Default

    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
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  5. #5
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Default

    bumping this with another question
    Code:
     //table is clicked
        $('#toolbox-table').click(function(){
        Ext.getCmp('designer').body.appendChild(createTable(3,4));
        })
        
        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
        for(j=1;j<=_columns;j++){
        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
    Code:
    GET(el) is null
    here is the error
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    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:
    Code:
    Ext.get('toolbox-table').on('click', function(){
        Ext.getCmp('designer').body.appendChild(createTable(3,4));
    });

  7. #7
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Default

    Quote Originally Posted by Condor View Post
    ps. Why would you use jQuery instead of Ext:
    Trying something different to see what both the frameworks create when put to gather , 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:
    Code:
    el : String/HTMLElement/Array/Element/CompositeElement
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Yes, but a 'String' parameter for appendChild means the id of an element.

  9. #9
    Ext User
    Join Date
    Sep 2010
    Location
    Probably here
    Posts
    35

    Default

    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
    New findings at my lab: http://labs.deeptechtons.net
    learning Extjs from http://forum.deeptechtons.net

  10. #10
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    No, only if you see a combination of String/HTMLElement/Element then String means element id.

Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 6
    Last Post: 4 Jul 2008, 4:59 AM
  2. Query variables appended
    By psykoprogrammer in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 16 Jan 2008, 12:16 AM
  3. organizer.js Removing dropped element from DataView
    By alwaysvip in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 6 Dec 2007, 6:54 AM
  4. dynamically generated fieldset is appended outside the form
    By simonspitz in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 25 Jun 2007, 1:53 AM

Tags for this Thread

Posting Permissions

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