View Full Version : ux.plugins.SizeToTarget

6 Jun 2008, 10:36 AM
Here's a plugin that resizes any Ext.Panel (or sub-class) to a specific element (by id or selector) located in its body. (Not really useful within most layouts however, but great for Ext.Windows. )

/* config options
id : [optional] Element id (or Element) of the resize target
selector : [optional] CSS selector of the resize target (should not include an ID)
onEvents : the containers event name(s) which defines when SizeTo is invoked
delay : [optional] milliseconds delay

Example: plugins: [new Ext.ux.plugins.SizeToTarget({ onEvents:['render'], selector:'img.sizeToMe'}) ]
Ext.ux.plugins.SizeToTarget = function(opt) {
var options = Ext.apply({
selector : null,
onEvents : ['render'],
delay : false,
el: null

return {
init: function(c) {

this.container = c;
c.sizeToTarget = function(target) {

var t = Ext.get(target) || arguments.callee.target , b;

if(t && (b = this.body)){
var tSize = t.getSize();

//calc current offsets for body border and padding
var bHeightAdj = b.getHeight() - b.getHeight(true);
var bWidthAdj = b.getWidth() - b.getWidth(true);

this.setSize(Math.max(this.minWidth || options.minWidth || 0, tSize.width + this.getFrameWidth() + bWidthAdj) ,
Math.max(this.minHeight || options.minHeight || 0, tSize.height + this.getFrameHeight() + bHeightAdj) );

//setup event listeners for resizing
if(!!(options.onEvents||[]).length && (options.el || options.selector)){
Ext.each([].concat(options.onEvents) ,
c.on.createDelegate(c,[this.hookTarget ,this,options.delay?{delay:options.delay}:null],1),


hookTarget : function(){
var o=options,
el = o.el,
s = o.selector,
c = this.container;

c.sizeToTarget.target = Ext.get(el) || c.body.child(s || el);

Usage example:

Given this markup (where the image size is unknown) :

<img id="anImage" class="x-hide-visibility" src="http://farm3.static.flickr.com/2363/1526194302_f64d9578c4_m.jpg" />

Ext.onReady( function() {
var p = new Ext.Panel({
title: 'SizeToTarget Sample',
renderTo : Ext.getBody(),
contentEl : 'anImage',
hideMode: 'visibility',
plugins: [ new Ext.ux.plugins.SizeToTarget({selector:'img', onEvents:'render'}) ]
Also, see the attached radar.js for a custom ImageWindow class used to view US Regional Radar images. Just load the entire script into a suitable Ext shell page.

Enjoy. ;)

10 Jun 2008, 6:33 AM
Would it be possible to reverse this logic, and instead force an element to resize to its containing Panel?

I'm having a problem right now with a TEXTAREA element that I want to fill an entire TabPanel--works great in FF using CSS, but IE7 apparently needs the height and width forced and managed on resize.

10 Jun 2008, 6:42 AM
an AnchorLayout on the panel & an anchor: '100% 100%' config on the textarea doesn't work for you?

10 Jun 2008, 7:00 AM

Works beautifully if I use Ext.form.TextArea, but I was trying to resize an existing TEXTAREA that is either inside or is the contentEl.

One caveat: In IE7, having margins on the TextArea (via CSS) makes the scrollbar partially clip outside the tab.

Edit: that problem only occurs with "em"-unit padding--pixels work fine.

I can live with this, even though I'm not using Ext JS to manage my form. I'll have to copy the value to a hidden field before posting. But I was having to do that anyway since the form itself is in another tab (and I can't figure out how to keep the form element outside the ViewPort so my plaiin ol' HTML fields remain in it).

16 Nov 2008, 5:02 PM
Would it be possible to reverse this logic, and instead force an element to resize to its containing Panel?

I too would love to see this.

I have a portal application with various portlets, one of the portlets is an image container - I have no idea what the dimensions are, but I would like to resize large images to actually fit the portlet (again, this particular portlet does not have a fixed width).

Would there be another Ext function that can do this trick? Or would I have to write something outside Ext?