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
    6,062
    Vote Rating
    215
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      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