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)