Results 1 to 3 of 3

Thread: how to build a resizeable component

  1. #1
    Sencha Premium User mrsunshine's Avatar
    Join Date
    Sep 2008
    Location
    Germany - Darmstadt
    Posts
    693

    Question how to build a resizeable component

    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 .. ;-)

  2. #2
    Sencha User
    Join Date
    Jun 2010
    Posts
    220

    Default

    Here's one idea:

    Code:
    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)
                        proxy.ownerCt.setSize(ownerSize);
                };
    
            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'}]
            }]
        });
    }
    });

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    220

    Default

    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.

Similar Threads

  1. how to build a gxt component from html code
    By riadhhwajdii in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 24 Mar 2010, 6:37 AM
  2. Can Resizeable component crop?
    By Sesshomurai in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 23 Oct 2009, 3:13 AM
  3. Resizeable component positioned centrally inside Panel
    By Vidocq in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 7 Jul 2009, 1:00 AM
  4. build wizard component problem
    By ustvsh in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 27 Feb 2009, 8:24 AM
  5. Dynamically build new component on the fly.
    By mjaomaha in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 24 Feb 2009, 2:30 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •