1. #1
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194
    Vote Rating
    0
    Rowan is on a distinguished road

      0  

    Default [1.1,2.0] Ext.ux.Sortable - Simple Drag Drop implementation

    [1.1,2.0] Ext.ux.Sortable - Simple Drag Drop implementation


    Hi Everyone, this is my first go at an Ext-ension as such - been using the library for about a year and constantly get PM's about how to set up DragDrop, how to use handles, DD Groups etc.

    This isn't the definitive plugin by any means but thought I would add something to the community as I would not have been able to do my job without it.

    What is it?

    This is a DD Class that enables DD on a container with custom events to listen to.

    What can it do?

    Create DD, disable DD, Add and element, remove an element, lock, unlock, do the dishes and more.

    Chuck this above your Ext Directory in order to get the demo working, sorry I have no web space these days for a demo.

    http://extjs.com/learn/Extension:Sortable

    Usage

    PHP Code:
    function contextAlert(){
                
    alert('Im a right click, look at me!')
            };
            
            var 
    sortable1 = new Ext.ux.Sortable({
                
    container 'sortable1',
                
    handles true,
                
    contextMenu contextAlert
            
    });
            
            
    sortable1.on('serialise', function(){
                
    alert('He slimed you');
            });
        
        var 
    sortable3 = new Ext.ux.Sortable({
            
    container 'sortable3',
            
    handles true,
            
    horizontal true,
            
    DDGroupName 'sideways'            
        
    }); 
    If anyone needs any help feel free to PM me or post on here

    Hope this helps someone else

    Rowan


    Release notes 0.45
    Switch enable functions id calls back to using IDs or Dom reference, changed by error

    Release notes 0.4

    Fixed bug with onunload event, added override for Ext base function, could maybe add to official Ext build
    Added in fix for IE6 radio buttons by Jelt
    Added reference to serialize for our American friends, event added as serialize too.

    Demo - CSS is wrong in IE6 but gives an idea on how to use it
    http://ext4sap.free.fr/sortable0.4.html
    Attached Files
    Last edited by Rowan; 15 Jun 2008 at 7:28 AM. Reason: Added demo link

  2. #2
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    hi,
    does it work just for vertical dd?

  3. #3
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194
    Vote Rating
    0
    Rowan is on a distinguished road

      0  

    Default


    You could easily use it for horizontal, just change where the XY is listed as GoingUp / GoingDown and set your CS accordingly.

    I will edit it later for you, I have never had a use for Horizontal but will add it in.

    Great idea, thanks.

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194
    Vote Rating
    0
    Rowan is on a distinguished road

      0  

    Default


    Added in horizontal ability and put example in the code.

    Thanks

    Rowan

  5. #5
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    I have changed a function in your extension to work with horizontal and vertical without any parameter:

    Code:
    onNodeOver : function(n, dd, e, data)
    {
    	if(this.groups[Ext.dd.Registry.getTarget(this.srcEl.id).ddGroup])
    	{   
    		var dragEl = n.ddel;
    		if (Ext.lib.Dom.getX(this.srcEl) > Ext.lib.Event.getPageX(e))
    			this.goingPrevious = true;
    		else
    			this.goingPrevious = Ext.lib.Dom.getY(this.srcEl) > Ext.lib.Event.getPageY(e)? true : false;
    
    	      var destEl = Ext.get(n.ddel);
    		//see if this exists
    		if(this.srcEl !== null)
                    {
            		if (destEl.is(this.queryString)) 
    			{
    		      	if (this.goingPrevious) 
    				{
    		                // insert before
    		                this.srcEl.insertBefore(destEl);
    		            } else {
    		                // insert after
    		                this.srcEl.insertAfter(destEl);
    		            }
    			}
    		}
    		return this.dropAllowed;
    	} 
    	else 
    	{
    		return this.dropNotAllowed;
    	}
    }
    To test it you must change the css "ul.horizontal" to:
    Code:
    ul.horizontal {
    	background: black;
     	min-height:220px;
    }
    Tested only in FF2.

  6. #6
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194
    Vote Rating
    0
    Rowan is on a distinguished road

      0  

    Default


    Couldn't that be an issue if you were over a node and accidentally moved left?

    Otherwise I will add it in.

    I have some more ideas about how to extend this but it's a case of finding time to implement them.

    also is this function in Ext 1.1?

    Ext.lib.Dom.getX(this.srcEl) > Ext.lib.Event.getPageX(e)

  7. #7
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    I don't know what do you mean with "accidentally moved left". The way that I've test it you can configure the direction ("vertical" or "horizontal") in the css. So you can have, for example, 8 <li>'s with 4 <li> per line and move them in both sides.

    And then If you want it to move vertically, for instance. You just need to change your css UL class to show only one <li> per line.

    I can't say if it would work in Ext 1.1 since I've never used it.

  8. #8
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    ohh... the parameter "queryString" is an selector to define which elements will be registered?
    if so, is "container" param really necessary?

  9. #9
    Ext JS Premium Member
    Join Date
    May 2007
    Location
    London
    Posts
    194
    Vote Rating
    0
    Rowan is on a distinguished road

      0  

    Default


    The container parameter isn't always necessary, it's there in case you want use a container to initialise the DD, it defaults to the body of the window.

    The query string is based on a tag and class name - any combination will work. It's uses Ext.query to get the els so it's (tagName.className,container).

    If you wanted to use the default values of document.body and LI you would not even need to set any params.

    PHP Code:

    var sortable = new Ext.ux.Sortable(); 
    All of the values used in the top of the extension are the defaults which are then over ridden by the parameters supplied.

    The code above would enable a vertical list on all Li elements in the window.

    I think I will leave the code the way it was as in my experience you use either a horizontal or a vertical list, if you want to use float left on elements then set it to be horizontal as this will enable sideways insertion. You may get confusion when using your way as you would still use insert before so when you would expect it to go abolve an element (for example in a grid) it would go to left.

    You can always add in your own version of the DropZone in your own version if you feel that it works better your way. I think though its better to define your actions first. Also this plugin was designed to be cross Ext versions, I can't see those in 1.1 so I will leave alone for now.

    PHP Code:

        
    var config Ext.applyIf(obj,{
            
    container document.body,
            
    className null,
            
    tagName 'li',
            
    handles false,
            
    contextMenu false,
            
    DDGroupName 'draggable',
            
    autoEnable true,
            
    horizontal false
        
    }); 
    I have uploaded a slightly newer version as I noticed I was always setting the context menu listeners up with an empty function and there was an extra var named this.dropZone at the top of the function which was the over written.

    Thanks

    Rowan

  10. #10
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    What about an option "direction" that could be "horizontal", "vertical" and "both"?

    I asked about the container parameter because it could be set in the selector too.

    But your extension will help me a lot. Thanks for sharing!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar