Ext.ux.panel.SyncSize

[willf1976]

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.

/**
 * @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)

[mitchellsimoens]

Would be a little cautious to call components elements. May confuse some.

[willf1976]

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