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.SyncSize

    Ext.ux.panel.SyncSize


    Hi All

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

    Here is: Ext.ux.panel.SyncSize

    Causes one component to sync its size to another component.

    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
    */
    /*
    author: Will Ferrer
    date: 01/21/11
    history:
       
    */
    /**
     * @class Ext.ux.panel.SyncSize
     * @extends Ext.util.Observable
     * Causes one component to sync its size to another component.
     * @constructor
     * @param {Object} config The config object
     * @ptype x-panel-syncsize
     */
    Ext.ns('Ext.ux.panel');
    Ext.ux.panel.SyncSize = function(config){
        Ext.apply(this, config);
        Ext.ux.panel.SyncSize.superclass.constructor.call(this);
    };
    Ext.extend(Ext.ux.panel.SyncSize, Ext.util.Observable, {
    //Public Properties:
        /**
        * @cfg {Object} target
        * The target to sync sizes to. Defaults to null.
        */
        target : null,
        /**
        * @cfg {Array} syncEvents
        * Events to trigger the sync. Defaults to ['render', 'resize'].
        */
        syncEvents : ['render', 'resize'],
        /**
        * @cfg {Boolean} syncHeight
        * Whether or not to sync the height of the component. Defaults to false.
        */
        syncHeight : false,
        /**
        * @cfg {Boolean} syncWidth
        * Whether or not to sync the height of the component. Defaults to false.
        */
        syncWidth : true,
        /**
        * @cfg {number} widthMod
        * How much to mod the width of the component by. Defaults to 0.
        */
        widthMod : 0,
        /**
        * @cfg {number} heightMod
        * How much to mod the height of the component by. Defaults to 0.
        */
        heightMod : 0,
        
    //Private Functions:
        // @private
        init: function(parent){
            var n;
            this.parent = parent;
            this.parent.syncSizePlugin = this;
            if (Ext.isString(this.target)) {
                this.target = Ext.getCmp(this.target);
            }
            for(n=0; n<this.syncEvents.length; n++) {
                this.target.on(this.syncEvents[n], this.syncSize, this);
            }
        },
        // @private
        syncSize: function(){
            var newWidth, newHeight;
            if (this.syncHeight) {
               newHeight = this.target.getHeight() + this.heightMod;
               this.parent.setHeight(newHeight);
            }
            if (this.syncWidth) {
               newWidth = this.target.getWidth() + this.widthMod;
               this.parent.setWidth(newWidth);
            }
        }
    });
    Ext.preg('ux-panel-syncsize', Ext.ux.panel.SyncSize);
    Best regards

    Will Ferrer (Run the Business)
    Last edited by willf1976; 17 Jan 2013 at 7:37 PM. Reason: mitchells suggestions

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    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


    Would be a little cautious to call components elements. May confuse some.
    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

    That's a good point -- I will try to avoid the ambiguity in the future.

    Thank you for your input.

    Best regards

    Will Ferrer

Thread Participants: 1

Tags for this Thread