View Full Version : how to build a resizeable component

21 Jun 2010, 11:17 AM
i ask my self how to build a resizeable component, but i saw only the browser resize event handling in the source code.

the idea is to have a component which is resizeable by tabhold on one corner of the component. like i resize a Ext.Window in ExtJS.

Any ideas, hints .. ;-)

22 Jul 2010, 1:24 PM
Here's one idea:

Ext.Sizer = Ext.extend(Ext.Button, {
ui: 'mask',
iconCls: 'maps', //need a better icon
style: 'position: absolute; right: 0; bottom: 0;',
draggable: true,
dragConfig: { revert: true, listeners: {} },
initComponent: function () {
var proxy = this;
//doing this here until beforedragend exposed through component
this.dragConfig.listeners.beforeDragEnd =
function (sizer) {
var ownerSize = proxy.ownerCt.getSize();
ownerSize.height += sizer.position.y;
ownerSize.width += sizer.position.x;
if (ownerSize.width > 0 && ownerSize.height > 0)

Ext.Sizer.superclass.initComponent.apply(this, arguments);
Ext.reg('sizer', Ext.Sizer);

Ext.setup({ onReady: function () {
new Ext.Panel({ fullscreen: true,
items: [{
height: 100, width: 100,
style: 'border:1px solid green; margin: 100px;',
items: [{ xtype: 'sizer'}]

23 Jul 2010, 6:50 AM
Just discovered a far more elegant approach, the sencha pinch example (although I still kinda like mine :) )
On an ipad go to the kitchensink example and then change /examples/kitchensink to /examples/pinch to see it. If they changed the height/width from 400 to 100 it would look ok on an iphone as well... I guess that's why it's not listed as one of the example icon's on the /examples page...

Note: the pinch event does not fire on a scrollable element, because the touchmove event is used for scrolling before anything else. Maybe a feature request for adding a delay to the pinch, like drag has a delay option.