Retina Images not being loaded on sencha touch - sencha-touch

Question

I've included retina.js in my Sencha Touch application. When watching the network monitor I see
retina.js is loaded
images are loaded normaly example.jpg
no #2x images are loaded example#2x.jpg or even looked for
Using chrome to emulate an iphone this is all I see
I also manually ran Retina.init(window) however nothing happens. All images remain non-retina. Running Retina.isRetina() returns true
I don't actually own a retina device, so I am not sure if that is the issue. However my friend with an iPhone 5s says the image quality has not improved, so I am assuming the retina images are not showing up.
The documentation is not very helpful
I figure this has to do with the fact that images are created and loaded with JS (the images are not there onload)
Using chrome for debugging, how can I make retina.js work for my app?

Answer 1

OK, so I used a small part of the retina.js file and created a new class, it uses the isRetina function to tell weather the devicePixelRatio is higher than 1.
Ext.define('MyApp.Retina', {
singleton: true,
isRetina : function(){
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
(min--moz-device-pixel-ratio: 1.5),\
(-o-min-device-pixel-ratio: 3/2),\
(min-resolution: 1.5dppx)";
if (window.devicePixelRatio > 1)
return true;
if (window.matchMedia && window.matchMedia(mediaQuery).matches)
return true;
return false;
},
getSrc: function(url){
return this.isRetina()? [url.slice(0, -4), '#2x', url.slice(-4)].join(''): url;
}
});
Now throughout my sencha app I create images with MyApp.Retina.('http://example.com/foo.jpg') as src value, when the device is retina the function returns http://example.com/foo#2x.jpg