1. #1
    Sencha User willf1976's Avatar
    Join Date
    May 2009
    Location
    carpinteria, ca
    Posts
    84
    Vote Rating
    0
    willf1976 is on a distinguished road

      0  

    Default Ext.ux.panel.RemoteInstantiateDirect

    Ext.ux.panel.RemoteInstantiateDirect


    Hi All

    I have been going through the classes we have developed and sharing back with the community some of them that I think will be useful to others. These components have been tested in ext-3.2.1.

    Here is: Ext.ux.panel.RemoteInstantiateDirect

    A plugin which will send data to the server and instantiate new child objects into the container it is attached to based on the return. The return from the server is meant to be a config for an ext component that will be instantiate. Requests made to server are made through an ext direct method placed in the api.load config property.

    Code:
    /**
     * @author Will Ferrer, Ethan Brooks
     * @copyright (c) 2012, Intellectual Property Private Equity Group
     * @licensee 2012 developed under license for Switchsoft LLC http://www.switchsoft.com a "Direct response telephony company" as part of it's "VOIP Call distribution, ROI analysis platform, call recording, and IVR for inbound and outbound sales" and Run the Business Systems LLC a "Technology development investment group" as part of it's "PHP, Javascript rapid application development framework and MySQL analysis tools"
     * @license licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
     * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
    * We are pretty nice just ask. We want to meet our licensees
    */
    
    /**
     * @class Ext.ux.panel.RemoteInstantiateDirect
     * @extends Object
     * A plugin which will send data to the server and instantiate new child objects into the container it is attached to based on the return. The return from the server is meant to be a config for an ext component that will be instantiate. Requests made to server are made through an ext direct method placed in the api.load config property. Data passed back from the server should be structured as follows:
     * {'addToItems':true if you want the container to not have its current contents cleared before adding the new items being downloaded from the server, items:[configs for each item goes here -- if you include an object with a key of 'eval' anywhere in a config with a 'scope' property and a 'string' property this part of the config will be replaced with the evaled version of the string. If you include a property of 'asProperty' and set it to a string, then the item will be created and added to this plugins parent as a property (specified by that string) instead of added to the parent by use of the 'add' function -- in this way you can add properties to the parent with other configs and scripts can access (useful for when you want to instantiate a store which other configs you are passing needs to use)], evals:[{scope:string that represents the scope that the string will be run in -- usualy 'this', string:the string to eval}]
     * Each item that is instantiated will be stored on the plugin in the instantiatedItems property with a key of the id of the item that was instantiated. 
     * @constructor
     * @param {Object} config The config object
     * @ptype ux-panel-remoteinstantiatedirect
     */
    Ext.ns('Ext.ux.panel');
    Ext.ux.panel.RemoteInstantiateDirect = function(config){
        Ext.apply(this, config);
        Ext.ux.panel.RemoteInstantiateDirect.superclass.constructor.call(this);
    };
    Ext.extend(Ext.ux.panel.RemoteInstantiateDirect, Ext.util.Observable, {
    //Public Properties:
        /**
        * @cfg {Array|Null} captureParmas
        * An array of the params to capture and send to the remote server. Each param should be a property of the object that the plugin is attached to -- this properties will be collected and passed with the other params to the remote script. Defaults to null.
        */
        captureParmas : null,
        /**
        * @cfg {Object|Null} baseParams
        * Base params to send to the remote script. Defaults to null.
        */
        baseParams : null,
        /**
        * @cfg {Object} api
        * The api to use for direct requests. Defaults to Object.
        */
        api : {
            load : null
        },
        /**
        * @cfg {Boolean} displayErrors
        * Whether or not to display errors returned from the remote server. Defaults to true.
        */
        displayErrors : true,
        /**
        * @cfg {Boolean} autoLoad
        * Run load when component is instantiated by default. Defaults to true.
        */
        autoLoad : true,
        /**
        * @cfg {Boolean} autoLayout
        * Run the parent components do layout function when each new item is added. Defaults to true.
        */
        autoLayout : true,
        /**
        * @cfg {Boolean} autoRender
        * Run the  components render function when added to the parent -- activates only if there is a render function to run. Defaults to true.
        */
        autoRender : true,
        /**
        * @cfg {Boolean} autoShow
        * Run the  components show function when added to the parent -- activates only if there is a show function to run. Defaults to true.
        */
        autoShow : true,
    //Private Properites:
        // @private
        parent : null,
        // @private
        instantiatedItems : {},
    //Public Functions:
        /** Public Function: load
        * loads the component to instantiate from the remote server
        * @param {Object} params (Required) additional params to send to the remote script.
        */
        load: function(params) {
            var capturedParams = this.captureParams();
                params = Ext.apply(capturedParams, this.baseParams, params),
                api = this.api;
            if (this.parent.fireEvent('beforeloadremotecomponent', this, params)) {
                api.load(params, this.loadSuccess, this);
            }
            
        },
        /** Public Function: instantiate
        * instantiates a new object based on the return from the server. Is usually called by the loadSuccess function but can also be called directly.
        * @param {Object} info (Required) the info used to instantiate the object
        */
        instantiate : function(info) {
            var addToItems = info['addToItems'],
                items = info['items'],
                autoLayout = this.autoLayout,
                autoRender = this.autoRender,
                autoShow = this.autoShow,
                n, curItem, curEval, finishedItem, processed, asProperty;
                
            if (addToItems!=true) {
                this.parent.removeAll();
            }
            for (n=0; n<items.length; n++) {
                curItem = items[n];
                asProperty = curItem['asProperty'];
                processed = this.preProcess(curItem);
                curItem = processed;
                if (!Ext.isEmpty(asProperty)) {
                    if (!Ext.isEmpty(curItem.xtype)) {
                        finishedItem = Ext.create(curItem);
                    } else {
                        finishedItem = curItem;
                    }
                    this.parent[asProperty] = finishedItem;
                } else {
                    this.parent.add(curItem);
                    finishedItem = this.parent.items.items[this.parent.items.items.length-1];
                    if (autoLayout) {
                        this.parent.doLayout();
                    }
                    
                    if (autoRender && !Ext.isEmpty(finishedItem.render)) {
                        finishedItem.render();
                    }
                    
                    if (autoShow && !Ext.isEmpty(finishedItem.show)) {
                        finishedItem.show();
                    }
                }
                this.instantiatedItems[finishedItem.id] = finishedItem;
                curEval = (Ext.isArray(curItem.evals))?curItem.evals:[curItem.evals];
                this.runEvals(finishedItem, curItem.evals);
            }
        },
    //Private Functions:
        // @private
        loadSuccess : function (response, options) {
            if (response.success == true) {
                this.instantiate(response.result);
    
            } else if (this.displayErrors) {
                // show error
                Ext.Msg.alert('Error', response.message);
            }
            this.parent.fireEvent('afterloadremotecomponent', this, response, options);
        },
        // @private
        preProcess : function (target) {
            var obj, string, scope, property, evaled, processed;
            for (obj in target) {
                if (obj!='eval') {
                    child = target[obj];
                    if (typeof(child) == 'object') {
                        processed = this.preProcess(child);
                        /*if (!Ext.isEmpty(processed)) {
                            processed.remoteInstantiateContainer = this.parent;
                        }*/
                        target[obj] = processed;
                    }
                }
                /*if (obj=='storeData') {
                    target['data'] = target[obj];
                }*/
            }
            if (!Ext.isEmpty(target) && typeof(target) == 'object' && !Ext.isEmpty(target['eval'])) {
                scope = eval(target['eval']['scope']);
                string = target['eval']['string'];
                evaled = this.evalString.call(scope, string);
                target = evaled;
            }
            return target;
        },
        // @private
        runEvals : function (evals) {
            var n, curEval, data, scope;
            for (n=0; n<evals.length; n++) {
                curEval = evals[n];
                string = curEval['string'];
                scope = eval(curEval['scope']);
                this.evalString.call(scope, string);
            }
        },
        // @private
        evalString : function (string) {
            var returnObj = eval(string);
            return returnObj;
        },
        // @private
        init: function(parent) {
            this.parent = parent;
            this.parent.remoteInstantiate = this;
            this.parent.addEvents(
                /**
                * @event beforeloadremotecomponent
                * Fires when a remote item is about to be loaded. Return false to cancel the operation.
                * @param {Ext.ux.panel.RemoteInstantiateDirect} this
                * @param {Object} params The params that will be passed to the remote script
                */
                'beforeloadremotecomponent',
                /**
                * @event beforeloadremoteitem
                * Fires when a remote item is about to be loaded. Return false to cancel the operation.
                * @param {Ext.ux.panel.RemoteInstantiateDirect} this
                * @param {Object} response The response from the server
                * @param {Object} options The options passed to the direct request   
                */
                'afterloadremotecomponent'
            );
    
            if (this.autoLoad) {
                this.load();
            }
        },
        // @private
        captureParams: function (captureParams) {
            var captureParams = (Ext.isEmpty(captureParams))?this.captureParams:captureParams,
                n, properties={}, curProperty;
            for(n=0;n<captureParams.length; n++){
                curProperty = captureParams[n];
                properties[curProperty] = this.parent[curProperty];
            }
            return properties;
        }
        
    });
    Ext.preg('ux-panel-remoteinstantiatedirect', Ext.ux.panel.RemoteInstantiateDirect);
    Best regards

    Will Ferrer (Run the Business)

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,095
    Vote Rating
    855
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the contribution!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User willf1976's Avatar
    Join Date
    May 2009
    Location
    carpinteria, ca
    Posts
    84
    Vote Rating
    0
    willf1976 is on a distinguished road

      0  

    Default


    Hi mitchell

    Thank you very much for the thank yous. We are glad to give back anything we can since ext and this community has helped us so much in our products development.

    Hope this message finds you well.

    Best regards

    Will Ferrer

Thread Participants: 1

Tags for this Thread