Results 1 to 2 of 2

Thread: Floating "showBy" anchor

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
      0  

    Default Answered: Floating "showBy" anchor

    I am attempting to recreate the Kitchen Sink's approach to it's navigation experience. I want to allow the navigation to either be docked or floating dependent on screen size, device, etc.

    I've gotten the functionality to work, however, the anchor which was present in Touch 1.1 when the Ext.Component#showBy function was called, won't appear in Touch2. I also noticed in the Kitchen Sink that it is no longer used and all overlays/floating panels/modal windows are now centered and now longer anchored.

    However, I did find the ".x-anchor" css class within the Touch2 style sheet.

    Am I missing a configuration setting?

    no-anchor.jpg


    Resize function:

    Code:
    handleResize: function(x,y){
    var bar = Ext.getCmp('menu-bar');
    var menu = Ext.getCmp('main-menu'); if( x <= 320 ){ bar.show(); menu.setHeight(150); menu.setDocked(false); menu.showBy(Ext.getCmp('menu-button')); // Button on bar } else{ bar.hide(); this.add(menu); menu.setDocked('left'); menu.setHeight(window.innerHeight-50); menu.show(); } }
    Here's a Custom Panel Class I created.

    Code:
    // JavaScript Document
    
    Ext.define('InView.views.MultiCardView', {
        alias: ['widget.x-multicard'],
        extend: 'Ext.Panel',
        cardStack: [],        
        constructor: function (config) {
                    
            // Main Menu
            var menubar = {
                id: 'menu-bar',
                xtype:'toolbar',
                ui:'dark',
                docked:'top',
                hidden: (window.innerWidth > 500) ? true : false,
                items:[{text:'Button',id:'menu-button'}]
            };
            
            // Main Menu
            var menu = {
                id: 'main-menu',
                xtype: 'x-menu-plug',
                hidden: (window.innerWidth < 500) ? true : false,
                cls:[],
                properties: {
                    //owner: 'mainViewport',
                    refs:    Ext.Array.pluck(config.items,'id'),
                    labels:    Ext.Array.pluck(config.items,'title')
                }
            };        
            
            // Create append navigation to card    
            Ext.apply(config,{
                layout:'vbox',
                items: config.items.concat([menubar,menu]),
                listeners:{
                    resize: this.handleResize,
                    activeItemChange: this.handleBackBar
                }
            });
            
            // Calls Ext.panel.Panel's constructor
            this.callParent(arguments); 
            
            // Bind Viewport resize event to handle menu display
            Ext.Viewport.on('resize',function (x,y) {
                this.fireEvent('resize',x,y,event);
            },this);
            
            
        },
        
        handleResize: function(x,y){
            var bar = Ext.getCmp('menu-bar');
            var menu = Ext.getCmp('main-menu');
            
            if( x <= 320 ){
                bar.show();
                menu.setHeight(150);
                menu.setDocked(false);
                menu.showBy(Ext.getCmp('menu-button'));            
            }        
            else{
                bar.hide();    
                this.add(menu);
                menu.setDocked('left');
                menu.setHeight(window.innerHeight-50);
                menu.show();    
            }
        },
        
        handleBackBar: function( panel, newCard, prevCard ) {
            if( newCard.id != this.cardStack[this.cardStack.length-1]  ) {    
                var backBar = newCard.getComponent('backBar-'+ newCard.id);        
                if( backBar ) {
                    if(backBar.isHidden()){
                        backBar.setDocked('top');
                        backBar.show();
                    }
                    this.cardStack.push(prevCard.id);
                }
            }else if (  newCard.id == this.cardStack[this.cardStack.length-1] ){
                this.cardStack.pop();
            }
        }
    });

  2. This isn't in PR2 unfortunately, but it will return for the GA.

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,159
    Answers
    93
    Vote Rating
    7
      0  

    Default

    This isn't in PR2 unfortunately, but it will return for the GA.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Tags for this Thread

Posting Permissions

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