function(component, alignment) {
        var me = this,
            viewport = Ext.Viewport,
            parent = me.getParent();

        me.setVisibility(false);

        if (parent !== viewport) {
            viewport.add(me);
        }

        me.show();

        me.on({
            hide: 'onShowByErased',
            destroy: 'onShowByErased',
            single: true,
            scope: me
        });
        viewport.on('resize', 'alignTo', me, { args: [component, alignment] });

        me.alignTo(component, alignment);
        me.setVisibility(true);
    }
function(component, alignment) {
        var me = this,
            viewport = Ext.Viewport,
            parent = me.getParent();

        me.setVisibility(false);

        if (parent !== viewport) {
            viewport.add(me);
        }

        me.show();

        me.on({
            hide: 'onShowByErased',
            destroy: 'onShowByErased',
            single: true,
            scope: me
        });
        viewport.on('resize', 'alignTo', me, { args: [component, alignment] });

        me.alignTo(component, alignment);
        me.setVisibility(true);
    }
function ( component , alignment ) { var me = this , viewport = Ext . Viewport , parent = me . getParent ( ) ; me . setVisibility ( false ) ; if ( parent !== viewport ) { viewport . add ( me ) ; } me . show ( ) ; me . on ( { hide : 'onShowByErased' , destroy : 'onShowByErased' , single : true , scope : me } ) ; viewport . on ( 'resize' , 'alignTo' , me , { args : [ component , alignment ] } ) ; me . alignTo ( component , alignment ) ; me . setVisibility ( true ) ; }
Shows this component by another component. If you specify no alignment, it will automatically
position this component relative to the reference component.

For example, say we are aligning a Panel next to a Button, the alignment string would look like this:

[panel-vertical (t/b/c)][panel-horizontal (l/r/c)]-[button-vertical (t/b/c)][button-horizontal (l/r/c)]

where t = top, b = bottom, c = center, l = left, r = right.

## Examples

- `tl-tr` means top-left corner of the Panel to the top-right corner of the Button
- `tc-bc` means top-center of the Panel to the bottom-center of the Button

You can put a '?' at the end of the alignment string to constrain the floating element to the
{@link Ext.Viewport Viewport}

// show `panel` by `button` using the default positioning (auto fit)
panel.showBy(button);

// align the top left corner of `panel` with the top right corner of `button` (constrained to viewport)
panel.showBy(button, "tl-tr?");

// align the bottom right corner of `panel` with the center left edge of `button` (not constrained by viewport)
panel.showBy(button, "br-cl");

@param {Ext.Component} component The target component to show this component by.
@param {String} alignment (optional) The specific alignment.
Shows this component by another component . If you specify no alignment it will automatically position this component relative to the reference component .