Thank you for reporting this bug. We will make it our priority to review this report.
  1. 10 Nov 2011 3:07 AM #1
    sk205
    sk205 is offline
    Sencha User
    Join Date
    Apr 2008
    Posts
    25
    Vote Rating
    0
    sk205 is on a distinguished road
      0  

    Default Drag and drop bug

    Drag and drop bug


    Ext version tested:
    • Ext 3.4.0
    Adapter used:
    • ext
    css used:
    • only default ext-all.css
    • custom css
      • float and clear
    Browser versions tested against:
    • Chrome 15.0.874.106 m
    • IE9
    • FF8.0 (firebug 1.8.4)
    Operating System:
    • Win7 Enterprise SP1
    Description:
    • The bug was introduced when updating from ext3.2.1 to 3.4.0.
    • This is when you have a splitter between 2 containers with a parent container using a border layout. The splitter does not work(you can't drag the splitter when selecting it) in Chrome and IE9,8, or 7 but does in FF.
    • We managed to find the reason why this happens. There was an update in DDCore.js, specifically under the "getLocation" method, where instead of returning the region of the DDobject, we iterate through all of it's parents, and if they are scrollable we intersect the region with their parents, ande then return that. This was introduced in 3.4.0
    • The problem with this is that it does not take into consideration all cases, and our case was one of them. If you have the following html structure,
    Code:
    <style type="text/css">
        body #topBar {
            height: 90px;
            background-color: beige;
        }


        body #bottomBar 
        {
            float: left;
            clear: both;
            width: 100%;
        }
    </style>
    <div id="container">
        <div id="topBar"></div>
        <div id="bottomBar"/>
    </div>
    that means that container is a parent of bottomBar, but bottomBar gets rendered underneath the container div because of float and clear css properties applied to bottomBar. If the Ext Panel gets rendered in bottomBar, with a border layout and 2 regions with a splitbar between them, then weh you try and drag the splitbar, it will iterate through the parents, and when it gets to container, it will make the isScrollable() check in getLocation under DDCore.js, which will return true, because it checks clientHeight and it thinks it's only 90. This will pass the check, and it will try and intersect the regions, which they don't, so it will return undefined[/FONT]

    Test Case:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" />
    <style type="text/css">
        body #topBar {
            height: 90px;
            background-color: beige;
        }


        body #bottomBar 
        {
            float: left;
            clear: both;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="topBar"></div>
        <div id="bottomBar"/>
    </div>
             
    <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-3.4.0/ext-all-debug.js"></script>
    
    <script type="text/javascript">
        Ext.onReady(function() {
            var panel = new Ext.Panel({
                    title: "Sample Panel"
                    , layout: 'border'
                    , width: 600
                    , height: 400
                    , renderTo: "bottomBar"
                    , items: [{
                        region: 'center'
                        , layout: 'fit'
                        , frame: true
                    }, {
                        region: 'west'
                        , layout: 'fit'
                        , frame: true
                        , width: 200
                        , split: true
                    }]
                });
        });
    </script>    
</body>
</html>

    Steps to reproduce the problem:
    • Load the above script in Chrome or IE, and try to drag the splitter between the 2 panel regions.
    The result that was expected:
    • Regions get resized by dragging the splitter
    The result that occurs instead:
    • The splitter does not move, so regions can't resize
    Reply With Quote Reply With Quote
  2. 16 Nov 2011 6:48 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,714
    Vote Rating
    438
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    Thank you for the report but development on Ext JS 3.x is not as high of a priority as 4.x is being highly developed on.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  3. 9 Dec 2011 2:24 PM #3
    VegasRaab
    VegasRaab is offline
    Sencha User
    Join Date
    Mar 2010
    Posts
    4
    Vote Rating
    0
    VegasRaab is on a distinguished road
      0  

    Default


    We are seeing the same type of behavior within IE8 and IE9, when trying to resize a column in a GridPanel. It works with Ext 3.2.2 but not Ext 3.4.0.

    The problem seems to be occuring somewhere inside Ext.dd.DragDrop.handleMouseDown, in this "if" statement specifically...

    if (!this.hasOuterHandles && !this.DDM.isOverTarget(pt, this) ) {


    this.hasOuterHandles is true and so is the return value from this.DDM.isOverTarget.

    If I change IE9 to IE7 Document Mode (using the Developer Panel, which would be impractical for a user) it works fine, otherwise it will not resize. We can't manipulate the page's document type to account for EXT's bugs, as this is running within SharePoint.
    Reply With Quote Reply With Quote

Tags for this Thread