Results 1 to 3 of 3

Thread: Looking for Ext JS Equivalent of Sencha Touch panel showBy method

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    72
    Vote Rating
    5
      0  

    Default 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,154
    Vote Rating
    249
      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
    72
    Vote Rating
    5
      0  

    Default

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

Posting Permissions

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