Threaded View

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    1
    Vote Rating
    0
    dtchannell is on a distinguished road

      0  

    Default Answered: Floating "showBy" anchor

    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.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar