Results 1 to 8 of 8

Thread: Raphael Wrapper needed for 4.1

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    3

    Default Raphael Wrapper needed for 4.1

    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 ?


    Code:
    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
    Last edited by ianw; 17 Jan 2014 at 1:24 PM. Reason: Bad formatting

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    I haven't heard of anything for 4.x, but hopefully someone has crossed this bridge before and will offer something helpful.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    3

    Default

    Bump - Anyone got Raphael.js working in ExtJS 4.x ?

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6

    Default

    You can load Raphael by Ext.Loader
    (it is worth the try)
    PHP Code:
    // 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

  5. #5
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260
    Answers
    6

    Default

    @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

  6. #6
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6

    Default

    @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:

    PHP Code:
    // 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(fileListcallbackscopepreserveOrder) {
            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(this0);
            } else {
                
    //load each file (most browsers will do this in parallel)
                
    Ext.each(fileList, function(fileindex) {
                    
    fragment.appendChild(
                        
    this.buildScriptTag(fileonFileLoaded)
                    );
                }, 
    this);
                
                
    head.appendChild(fragment);
            }
        },   
        
    buildScriptTag: function(filenamecallback) {
            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

  7. #7
    Sencha User Misiu's Avatar
    Join Date
    Jun 2012
    Location
    Poland
    Posts
    260
    Answers
    6

    Default

    @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

  8. #8
    Sencha User
    Join Date
    Dec 2013
    Posts
    84
    Answers
    6

    Default

    cool - than you can also select my Answer as "best answer" - it is best motivation

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •