Results 1 to 1 of 1

Thread: Change card view with enter key mapping

  1. #1
    Sencha User
    Join Date
    May 2017
    Posts
    3
    Answers
    2

    Default Change card view with enter key mapping

    I am new to extjs and was wondering if I would be able to change views with the enter button. I have a panel with a card layout inside and 2 items within the card layout. Each item is a separate view called by the xtype. I was wondering if i would be able to hit enter from anywhere on the page and have it switch to the other view/ActiveItem. If it is possible am I able to have the function in the controller to change the ActiveItem? I am not sure how to go about this and I have looked at the documentation.

    Here is my code

    Main.js

    Code:
    Ext.define('Scanner.Web.view.main.Main', {
        extend: 'Ext.panel.Panel',
        controller: 'main',
    
    
        requires: [
            'Ext.Menu',
            'Ext.layout.Card',
            'Scanner.Web.view.main.ScanBadge',
            'Scanner.Web.view.main.ScanLocation',
            'Scanner.Web.view.main.MainController'
        ],
    
    
        keys:[{
            key: 'ENTER',
            scope: 'Scanner.Web.view.main.Main',
            handler: 'enterKey'
        }],
        
        items: [{
            xtype: 'panel',
            docked: 'top',
            tools: [{
                xtype: 'tool',
                reference: 'toggleLeftButton',
                iconCls: 'fa fa-bars',
                align: 'left',
                docked: 'left'
            }, {
                xtype: 'tool',
                iconCls: 'fa fa-sign-out',
                docked: 'right',
                reference: 'signOutButton'
            }
            ]
        }, {
            xtype: 'panel',
            docked: 'right',
            iconCls: 'fa fa-user'
        }, {
            style: "text-align: right",
            items: {
                html: 'USERNAME'
            }
        }, {
            style: "text-align: right",
            items: {
                html: 'LOCATION'
            }
        }, {
            xtype: 'panel',
            layout: 'card',
            activeItem: 0,
            height: '100%',
            id: 'cardLayout',
            reference: 'scanBadgeEnterKey',
            items: [{
                reference: 'scanBadgeEnterKey',
                layout: 'fit',
                xtype: "ScanBadge",
    
    
            }, {
                xtype: "ScanLocation",
    
    
            }
            ]
        }]
    });
    ScanBadge

    Code:
    Ext.define('Scanner.Web.view.main.ScanBadge', {
        extend: "Ext.panel.Panel",
        xtype: "ScanBadge",
        controller: 'main',
    
    
        items: [
        {
            id: 'ScanBadgePage',
            layout: 'fit',
            html: 'Scan your badge. Sample scans will be associated with your user id.',
            
        }]
    });
    Controller:

    Code:
    Ext.define('Scanner.Web.view.main.MainController', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.main',
    
    
        required: [
            'Scanner.Web.view.main.ScanBadge'
        ],
    
    
        control: {
            '[reference=toggleLeftButton]': { click: 'toggleLeft' },
            '[reference=signOutButton]': { click: 'signOut' }
        },
    
    
        init: function () {
            this.leftMenu = Ext.Viewport.setMenu(this.getMenuCfg('left'), {
                side: 'left',
                cover: true
            });
        },
    
    
        signOut: function () {
            Ext.Msg.alert('Alert', 'You have signed out');
        },
    
    
        },
        myHandler: function(){
            Ext.Msg.alert('Alert', 'You fklhsehs');
        },
    
    
        getMenuCfg: function (side) {
            var cfg = {
                side: side,
                style: "padding: 0px 0px 0px 0px",
                items: [{
                    xtype: 'container',
                    style: "background-color: gray",
                    height: '14%',
                    padding: '0px 0px 0px 0px',
                    items: [{
                        margin: "20 0 05 15",
                        xtype: 'image',
                        src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
                        width: 64,
                        height: 64,
                        style: { "border-radius": "50px 50px 50px 50px" },
                        padding: '15px 0px 0px 10px',
                    }, {
                        html: 'Username',
                        padding: '15px 0px 0px 10px',
                        style: { "font-size": "2em" }
                    }, {
                        layout: 'vbox',
                        padding: '20px 0px 0px 0px',
                        items: [{
                            iconCls: 'x-fa fa-map-marker',
                            iconAlign: 'left',
                            xtype: 'button',
                            text: 'Move Sample',
                        }, {
                            xtype: 'button',
                            text: 'Update Amount',
                            iconCls: "x-fa fa-balance-scale",
                            iconAlign: 'left'
                        }]
                    }]
                },
                ]
            };
    
    
            if (side === 'left' || side === 'right') {
                cfg.width = '20%';
            }
    
    
            return cfg;
        },
    
    
        toggleMenu: function (side) {
            Ext.Viewport.setMenu(this[side + 'Menu'], {
                side: side
            });
    
    
            Ext.Viewport.toggleMenu(side);
        },
    
    
        toggleLeft: function () {
            this.toggleMenu('left');
        }
    });
    Last edited by furtahs; 18 May 2017 at 9:48 AM. Reason: accidental submit

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
  •