1. #1
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    62
    Vote Rating
    3
    pbartels is on a distinguished road

      0  

    Default Resizable&draggable

    Resizable&draggable


    I'm building a widget editor for ext and one of the functionalities is to drag and resize widgets real-time. However, when I add both drag and resize to a single layer the following problem arises in this case:
    1.User drags layer
    2.User resizes layer
    3.user drags layer ----> now the drag-layer moves to a wrong location
    when repeating steps 1-3 the layer will eventually move out of the screen boundaries

    All of this tested in 1.1

    Code:
    Testlayer:
    <div id="test" style="width:200px;height:200px;border:1px solid black;">bla</div>

    JS:
    var resizable = new Ext.Resizable('test', {
    pinned: false,
    minWidth:100,
    minHeight:50,
    animate:true,
    easing: 'backIn',
    handles: 'all',
    disableTrackOver : false,
    duration:.4,
    draggable: true,
    wrap:false,
    dynamic:false
    });

  2. #2
    Ext User
    Join Date
    Jun 2007
    Posts
    1
    Vote Rating
    0
    jnelson is on a distinguished road

      0  

    Default Same issue...

    Same issue...


    Quote Originally Posted by pbartels View Post
    I'm building a widget editor for ext and one of the functionalities is to drag and resize widgets real-time. However, when I add both drag and resize to a single layer the following problem arises in this case:
    1.User drags layer
    2.User resizes layer
    3.user drags layer ----> now the drag-layer moves to a wrong location
    when repeating steps 1-3 the layer will eventually move out of the screen boundaries

    All of this tested in 1.1

    Code:
    Testlayer:
    <div id=&quot;test&quot; style=&quot;width:200px;height:200px;border:1px solid black;&quot;>bla</div>

    JS:
    var resizable = new Ext.Resizable('test', {
    pinned: false,
    minWidth:100,
    minHeight:50,
    animate:true,
    easing: 'backIn',
    handles: 'all',
    disableTrackOver : false,
    duration:.4,
    draggable: true,
    wrap:false,
    dynamic:false
    });
    I was having the same issues, but then I took a look at Ext.BasicDialog, it does everything I was after.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2007
    Posts
    62
    Vote Rating
    3
    pbartels is on a distinguished road

      0  

    Default


    Can anyone verify this?

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I was able to duplicate this with 1.1b, have to dig further.

  5. #5
    Ext User
    Join Date
    Jul 2007
    Posts
    26
    Vote Rating
    0
    obsidian is on a distinguished road

      0  

    Default Similar question

    Similar question


    I, too, have a similar question; however, mine is having to do with being able to confine the resize and drag effects within the boundaries of another element on the page. I'm running against a wall on this one due to the numerous triggers that have to be checked at a given time. Any suggestions?

  6. #6
    Ext User
    Join Date
    Sep 2007
    Posts
    65
    Vote Rating
    0
    mcohnen is on a distinguished road

      0  

    Default


    I am facing exactly the same problem. Any solution for this bug?

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,557
    Vote Rating
    383
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I have notified Jack on this bug.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    In order to drag and resize you must enable wrap:true. Otherwise you are dragging and resizing from the same element.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  9. #9
    Ext User
    Join Date
    Dec 2007
    Posts
    13
    Vote Rating
    0
    whipmeister is on a distinguished road

      0  

    Default


    I realize this is an old post, but this may help someone searching for a solution, as it appears a few folks have encountered this.

    I have confirmed that this behavior still exists in 2.2 and it does not seem related to the 'wrap: true' option.

    I HAVE found that setting 'dynamic: true' seems to fix it, but I don't know why.

    Here is a link to a page example demonstrating the two different behaviors:

    http://www.lanimation.net/ext22/exam...zable/bug.html

    Here are the two instantiations. Note the only difference is the dynamic option.


    var basic1 = new Ext.Resizable('basic1', {
    minWidth:25,
    minHeight:25,
    wrap: true,
    pinned:true,
    handles: 'e w',
    draggable: true,
    resizeChild: true
    });

    var basic = new Ext.Resizable('basic', {
    minWidth:25,
    minHeight:25,
    wrap: true,
    pinned:true,
    handles: 'e w',
    draggable: true,
    dynamic:true,
    resizeChild: true
    });
    It feels to me that this is actually a bug that the dynamic option overrides in some way.

    Anyway, hope this helps.