PDA

View Full Version : Moving an element inside a scrolling container



Dipish
8 Dec 2011, 3:35 AM
Hi all!

I'm struggling with an issue when trying to upgrade my application to Ext 4.
I'm not sure how to formulate my question correctly so I will just provide a simplified example.

ExtJS 3.1.0 code: (jsFiddle doesn't have a more recent version atm)
View on jsFiddle (http://jsfiddle.net/dipish/jEMNY/)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 300px;
height: 200px;
border: solid 2px red;
overflow: auto;
margin: 0 auto;
position: relative;
}

.item {
height: 180px;
width: 50px;
position: absolute;
}

#first-item {
background: gray;
left: 0px;
}

#second-item {
background: green;
left: 200px;
}

#last-item {
background: lightgray;
left: 400px;
}

#go {
width: 100%;
}
</style>

<script>
Ext.onReady(function() {
var cont = Ext.get('container'),
first = Ext.get('first-item'),
sec = Ext.get('second-item'),
last = Ext.get('last-item'),
goBtn = Ext.get('go');

function doAction() {
var delta = 100,
animCfg = {duration: 1};
first.setX(first.getX(), animCfg); // the 1st element MUST stay in its place
sec.setX(sec.getX() + delta, animCfg);
last.setX(last.getX() + delta, animCfg); // 3rd element just to expand the scroll range
cont.animate( // container scroll MUST follow the 2nd element
{
scroll: {to: [cont.dom.scrollLeft + delta, cont.dom.scrollTop]}
},
1,
undefined,
'easeOut',
'scroll'
);
};

goBtn.on('click', doAction);
});
</script>
</head>

<body>
<div id="container">
<div class="item" id="first-item"></div>
<div class="item" id="second-item"></div>
<div class="item" id="last-item"></div>
</div>
<button id="go">Action</button>
</body>
</html>


ExtJS 4.0.7-gpl code:
View on jsFiddle (http://jsfiddle.net/dipish/xVw4Z/)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
width: 300px;
height: 200px;
border: solid 2px red;
overflow: auto;
margin: 0 auto;
position: relative;
}

.item {
height: 180px;
width: 50px;
position: absolute;
}

#first-item {
background: gray;
left: 0px;
}

#second-item {
background: green;
left: 200px;
}

#last-item {
background: lightgray;
left: 400px;
}

#go {
width: 100%;
}
</style>

<script>
Ext.onReady(function() {
var cont = Ext.get('container'),
first = Ext.get('first-item'),
sec = Ext.get('second-item'),
last = Ext.get('last-item'),
goBtn = Ext.get('go');

function doAction() {
var delta = 100,
animCfg = {duration: 1000};
first.setX(first.getX(), animCfg); // the 1st element MUST stay in its place (doesn't in ExtJS 4)
sec.setX(sec.getX() + delta, animCfg);
last.setX(last.getX() + delta, animCfg); // 3rd element just to expand the scroll range
cont.scrollTo('left', cont.dom.scrollLeft + delta, animCfg); // container scroll MUST follow the 2nd element
};

goBtn.on('click', doAction);
});
</script>
</head>

<body>
<div id="container">
<div class="item" id="first-item"></div>
<div class="item" id="second-item"></div>
<div class="item" id="last-item"></div>
</div>
<button id="go">Action</button>
</body>
</html>



I marked the lines I am having problems with in Ext 4.

What happens in ExtJS 3 (I need to keep this behavior):

The first element remains in its place relative to the container (beginning of the container)
The second element remains inside the view
What happens in ExtJS 4 instead:

The first element seems to remain in the same position relative to the page, this creates a gap between the beginning of the container and the first element
The second element seems to fly away from the view, though in code I set the same delta for moving and scrolling distances.
Since it's not a trivial case it's hard for me to tell if my problem is caused by bugs in ExtJS 4 or I had been relying on the incorrect behavior before.

Anyway, recomendations on getting back to the old behaviour would be highly appreciated, I hope that someone would help me out.

Thank you very much in advance!

Dipish
8 Dec 2011, 4:04 AM
Additional research info:
This behavior seems to be browser-agnostic (tried in Chrome, FF, Opera)
I compared the core setXY, getXY and translatePoints methods between Ext 3 and Ext 4 and didn't notice any essential difference
So far I am confused about where to dig further...

Dipish
12 Dec 2011, 2:49 AM
I re-worked my code and made use of local left and top css properties to animate the movement of my child items inside the container instead of specifying page XY coordinates and now my code seems to work fine, plus I got some performance boost, but I'm still curious what is the cause of the different behavior between Ext 3 and Ext 4 in the example I provided.
I want to spot the differences in core code because they might show up later elsewhere.