1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default Looking for Ext JS Equivalent of Sencha Touch panel showBy method

    Looking for Ext JS Equivalent of Sencha Touch panel showBy method


    Hi all,

    There is a very useful method I use in Sencha Touch, which is the showBy method for a panel. It puts a nice visual arrow indicator on the panel to indicate what component (usually a button) I passed into the showBy method. I really like that and want to basically do the same thing in Ext Js, but the panels don't have a showBy method. I've looked into the showBy method of QuickTip but can't get that to work (I get: TypeError: 'undefined' is not an object (evaluating 'this.el.getAlignToXY') ). I'm not actually sure that the quick tip would be robust enough anyway. Am I missing something obvious here? Thanks.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,160
    Vote Rating
    190
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I think you'd have to make your own visual arrow indicator, but to show a floating component by another element/component you can do show().alignTo(cmp, 'loc-loc').
    http://docs.sencha.com/ext-js/4-0/#!...method-alignTo

    Code:
    var win1 = Ext.widget('window', {
        height: 100
        , width: 100
        , html: 'aligned to the top of the button'
    });
    
    
    var win2 = Ext.widget('window', {
        height: 100
        , width: 100
        , html: 'aligned to the bottom-left of the button'
    });
    
    
    Ext.widget('viewport', {
        layout: 'fit'
        , items: [{
            xtype: 'container'
            , layout: {
                type: 'vbox'
                , pack: 'center'
                , align: 'center'           
            }
            , items: [{
                xtype: 'button'
                , text: 'Align: top'
                , handler: function (btn) {
                    win1.show().alignTo(btn, 'b-t');
                }
            }, {
                 xtype: 'button'
                , text: 'Align: bottom-left'
                , margin: '15 0 0 0'
                , handler: function (btn) {
                    win2.show().alignTo(btn, 'tr-bl?');
                }            
            }]        
        }]
    });
    ‚Äč

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    63
    Vote Rating
    2
    scheid is on a distinguished road

      0  

    Default


    Awesome, thanks. This is exactly what I was looking for. I guess I was missing something obvious :-)

Thread Participants: 1