Memuat/Me-Load File Javascript Secara Terpisah

Assalamu'alaikum Wr Wb dan salam sejahtera
kali ini mpu-nya blog mau bagi2 pengetahuan lagi mengenai ExtJS...
yang kali ini akan di share kepada kodinger yaitu bagaimana caranya kita membangun sebuah aplikasi dengan ExtJS secara terorganisir file-nya...

Jika para kodinger sudah pernah membuat program dengan menggunakan framework ExtJS, maka kodinger pun tahu seperti apa kendala yang di hadapi dalam menggunakan framework ini???

......

Yes!!! Mungkin ada beberapa kodinger yang masih bingung dalam mengorganisasikan file-nya. Kebanyakan masih menempatkannya dalam satu file ^_^

Ok! disini mpu-nya blog akan men-share caranya untuk me-load/memuat file javascript biar lebih terorganisir, untuk yang sudah tahu silahkan untuk share pengerahuannya ^_^

Chek This Code :

First of all, yaelah lagak loe tong... tong...
buat script berikut...
----------------------------------------------------------
//Script untuk memanggil kelas manager
Ext.ux.ScriptManager = Ext.extend(Ext.util.Observable, {
    // The timeout in seconds to be used for requests
    timeout : 30,
 
   //array yang fungsinya private, dijalankan jika ada yang memanggilnya ^_^???
    scripts : [],
    disableCaching : false,
 
    /**
     * @constructor
     * Component constructor
     */
    constructor: function(config){
        Ext.apply(this, config);
        Ext.ux.ScriptManager.superclass.constructor.call(this, config)
    },
    loadJs : function(o){
        if (!o) { return;  }
        if (o.debug) {
            this.addAsScript(o);
            return;
        }
        if (!Ext.isArray(o.scripts)) {  o.scripts = [o.scripts]; }
        o.url = o.scripts.shift();
        if (o.scripts.length == 0) {  this._loadUrl(o);  }
        else {
            o.scope = this;
            this._loadUrl(o, function(){  this.loadJs(o); });
        }
    },
    loadCss : function(o) {
        var id = o.id || '';
        var file;
 
        if (!Ext.isArray(o.scripts)) { o.scripts = [o.scripts];  }
 
        for (var i = 0; i < o.scripts.length; i++) {
            file = o.scripts[i];
            id = '' + Math.floor(Math.random() * 100);
            Ext.util.CSS.createStyleSheet('', id);
            Ext.util.CSS.swapStyleSheet(id, file);
        }
 
        if(o.callback && Ext.isFunction(o.callback)){
            o.callback.createDelegate(o.scope || window).call();
        }
    },
    addAsScript : function(o) {
        var count = 0;
        var script;
        var files = o.scripts;
        if (!Ext.isArray(files)) {  files = [files]; }
        var head = document.getElementsByTagName('head')[0];
        Ext.each(files, function(file) {
            script = document.createElement('script');
            script.type = 'text/javascript';
            if (Ext.isFunction(o.callback)) {
                script.onload = script.onreadystatechange = function() {
                    count++;
                    if (count == files.length) {
                        o.callback.call();
                    }
                }
            }
            script.src = file;
            head.appendChild(script);
        });
    },
    _loadUrl : function(url, callback) {
        var cfg, callerScope;
        if (typeof url == 'object') { // must be config object
            cfg = url;
            url = cfg.url;
            callback = callback || cfg.callback;
            callerScope = cfg.scope;
            if (typeof cfg.timeout != 'undefined') {
                this.timeout = cfg.timeout;
            }
            if (typeof cfg.disableCaching != 'undefined') {
                this.disableCaching = cfg.disableCaching;
            }
        }
 
        if (this.scripts[url]) {
            if(callback && Ext.isFunction(callback)){
                callback.createDelegate(callerScope || window).call();
            }
            return null;
        }

        Ext.Ajax.request({
            url : url,
            success : this.processSuccess,
            failure : this.processFailure,
            scope : this,
            timeout : (this.timeout * 1000),
            disableCaching : this.disableCaching,
            argument : {
                'url' : url,
                'scope' : callerScope || window,
                'callback' : callback,
                'options' : cfg
            }
        });
        return null;
    },
    processSuccess : function(response) {
        this.scripts[response.argument.url] = true;
        window.execScript ? window.execScript(response.responseText) : window
        .eval(response.responseText);
        if (response.argument.options.scripts.length == 0) {
        }
        if (typeof response.argument.callback == 'function') {
            response.argument.callback.call(response.argument.scope);
        }
    },
    processFailure : function(response) {
        Ext.MessageBox.show({
            title : 'Application Error',
            msg : 'Script library could not be loaded.',
            closable : false,
            icon : Ext.MessageBox.ERROR,
            minWidth : 200,
            buttons: Ext.Msg.OK
        });
        /*setTimeout(function() {
            Ext.MessageBox.hide();
        }, 2000);*/ //yang ini saya komentar, kalo mau tahu fungsinya kodinger buka aja komennya ^_^
    }
});
---------------------------------------------------------- 
mpu-nya blog mendapatkannya dari si master Swarnendu @_@


Selanjutnya masukkan script berikut kedalam fungsi Ext.onReady()
--------------------------------------------------------------------

ScriptMgr = new Ext.ux.ScriptManager();
    ScriptMgr.loadJs({
        scripts : ['file yang mau di load ke-1','file yang mau di load ke-2'],
        debug : true,
        callback : function(){ console.log('Berhasil Memuat File...'); }

});

--------------------------------------------------------------------
disini kodinger bisa memuat lebih dari satu file, tapi ingat!!! tempatkan skrip diatas sesuai dengan kebutuhannya, yang sudah mpu-nya coba untuk skrip diatas hanya bisa memuat untuk file yang windownya berbeda, bila ingi memuat beda file tapi fungsi yang terkait harus ada didalam satu file maka tidak bisa. Si ExtJS tidak akan mengenali fungsi yang ada di beda file tersebut.... ^_^v


jika kodinger hanya ingin memuat satu file saja, maka tinggal tuliskan seperti ini :
----------------------------------------
scripts : ['file yang mau di load'],
----------------------------------------
Mudah kok! kalo udah paham sih... ^_^


Hokeh!!! Sekian tutor yang bisa mpu-nya blog kasih, kalo ada kekurangan dan kesalahan mohon di maafkan, tapi kalo ada kelebihan tolong masukkin ke kotak amal aja ^_^

Wassalamu'alaikum Wr Wb dan sampai jumpa.


Sumber : Swarnendu De