PDA

View Full Version : Raphael Wrapper needed for 4.1



ianw
17 Jan 2014, 11:26 AM
I have a project that uses the Raphael wrapper below to create a new Raphael Component.

I have tried converting this to 4.1 with no luck so far. Does anyone have a wrapper like below to allow Raphael to work in 4.1 please ?



Ext.ux.Raphael = Ext.extend(Ext.BoxComponent, {onRender: function(ct) {
var p = this.paper = Raphael(ct.dom), v;
this.el = Ext.get(p.canvas);


// Export all methods from this paper object which will not override our native
// methods like setSize etc.
for (var prop in p) {
v = p[prop];
if (!this[prop] && Ext.isFunction(v)) {
this[prop] = v.createDelegate(p);
}
}


// We always cache our size
this.cacheSizes = true;
},


getWidth: function() {
return this.lastSize.width;
},


getHeight: function() {
return this.lastSize.height;
},


onResize: function(w, h) {
this.paper.setSize(w, h);
}
});
Ext.reg('raphael', Ext.ux.Raphael);
// end of file

Gary Schlosberg
17 Jan 2014, 4:03 PM
I haven't heard of anything for 4.x, but hopefully someone has crossed this bridge before and will offer something helpful.

ianw
20 Jan 2014, 11:12 AM
Bump - Anyone got Raphael.js working in ExtJS 4.x ?

Malte123
20 Jan 2014, 4:38 PM
You can load Raphael by Ext.Loader
(it is worth the try)


// https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js

var raphael = Ext.Loader.getPath('Ext.ux')+'/raphael/master/raphael-min.js';
// http://www.sencha.com/forum/showthread.php?107796-Ext.ux.Loader-Load-js-css-Files-Dynamically&langid=4
var loader = Ext.create('Ext.ux.libs.Loader'); // this is an example where to put Loader
loader.load([
raphael
],
function() { // callback when finished loading
this.fireEvent('loaderReady');

},
this // scope
);


Don't forget to manage the addEvents() ... (if it doesn't work without)

Loader has to be copied also manually to your Ext.ux !
See http://www.sencha.com/forum/showthread.php?107796-Ext.ux.Loader-Load-js-css-Files-Dynamically&langid=4
(http://www.sencha.com/forum/showthread.php?107796-Ext.ux.Loader-Load-js-css-Files-Dynamically&langid=4)

Misiu
21 Jan 2014, 3:03 AM
@Malte123 do You have Ext.ux.Loader ported to Extjs 4.2? It's bit old extension and probably it can be done better using new ExtJS version.
BTW Nice example on how to load js and css on demand, this will probably work with d3.js I guess :)

Malte123
21 Jan 2014, 6:07 AM
@Malte123 do You have Ext.ux.Loader ported to Extjs 4.2? It's bit old extension and probably it can be done better using new ExtJS version.

Oh yes - I forgot - I also needed to port it.
Here is it:



// Ported from http://www.sencha.com/forum/showthread.php?107796-Ext.ux.Loader-Load-js-css-Files-Dynamically&langid=4 based on:
// 100822: Taken from Extjs 3.2.1. Dynamically loads js/css files and allows room for expansion.
Ext.define('Ext.ux.libs.Loader',{

load: function(fileList, callback, scope, preserveOrder) {
var scope = scope || this,
head = document.getElementsByTagName("head")[0],
fragment = document.createDocumentFragment(),
numFiles = fileList.length,
loadedFiles = 0,
me = this;

// Loads a particular file from the fileList by index. This is used when preserving order
var loadFileIndex = function(index) {
head.appendChild(
me.buildScriptTag(fileList[index], onFileLoaded)
);
};

/**
* Callback function which is called after each file has been loaded. This calls the callback
* passed to load once the final file in the fileList has been loaded
*/
var onFileLoaded = function() {
loadedFiles ++;

//if this was the last file, call the callback, otherwise load the next file
if (numFiles == loadedFiles && typeof callback == 'function') {
callback.call(scope);
} else {
if (preserveOrder === true) {
loadFileIndex(loadedFiles);
}
}
};

if (preserveOrder === true) {
loadFileIndex.call(this, 0);
} else {
//load each file (most browsers will do this in parallel)
Ext.each(fileList, function(file, index) {
fragment.appendChild(
this.buildScriptTag(file, onFileLoaded)
);
}, this);

head.appendChild(fragment);
}
},
buildScriptTag: function(filename, callback) {
var exten = filename.substr(filename.lastIndexOf('.')+1);
//console.log('Loader.buildScriptTag: filename=[%s], exten=[%s]', filename, exten);
if(exten=='js') {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = filename;

//IE has a different way of handling <script> loads, so we need to check for it here
if(script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = callback;
}
return script;
}
if(exten=='css') {
var style = document.createElement('link');
style.rel = 'stylesheet';
style.type = 'text/css';
style.href = filename;
callback();
return style;
}
}
});


BTW Nice example on how to load js and css on demand, this will probably work with d3.js I guess

<= Vote me up - I love it B)

Misiu
21 Jan 2014, 8:38 AM
@Malte123 I already did vote You up.
Thanks for ported loader.
Maybe You could add it to user extensions forum, this way it will get more attention :)

Malte123
21 Jan 2014, 12:04 PM
cool - than you can also select my Answer as "best answer" - it is best motivation :D