mjlecomte
4 Apr 2009, 3:46 PM
Ext.lib.Easing for bounceIn and bounceOut points to this.bounceOut/this.bounceIn, but those aren't scoped correctly it seems.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Effects test page</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
#demo {
background:#ccc;
height:300px;
width:300px;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
e = Ext.get('demo');
e.setWidth(500, {
duration: 2,
easing: 'bounceIn'
});
});
</script>
</head>
<body>
<div id="demo">Demo</div>
</body>
</html>
Ext.apply(Ext.lib.Easing, {
bounceIn: function(t, b, c, d){
return c - this.bounceOut(d - t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
...
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
},
bounceBoth: function(t, b, c, d){
return (t < d / 2) ? this.bounceIn...
}
});
})();
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Effects test page</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
#demo {
background:#ccc;
height:300px;
width:300px;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
e = Ext.get('demo');
e.setWidth(500, {
duration: 2,
easing: 'bounceIn'
});
});
</script>
</head>
<body>
<div id="demo">Demo</div>
</body>
</html>
Ext.apply(Ext.lib.Easing, {
bounceIn: function(t, b, c, d){
return c - this.bounceOut(d - t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
...
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + .984375) + b;
},
bounceBoth: function(t, b, c, d){
return (t < d / 2) ? this.bounceIn...
}
});
})();