Results 1 to 3 of 3

Thread: IPAD Left Menu and Right Content doesn't display correctly

  1. #1
    Sencha User
    Join Date
    Nov 2014
    Posts
    18

    Default IPAD Left Menu and Right Content doesn't display correctly

    Hi folks, Currently I'm optimizing our app to be viewed in IPAD. left menu is always showing, the right content always overlaps the menu. BTW, please see my codes below:

    tablet main view:

    Code:
    Ext.define('XX.view.tablet.portrait.Main',{    extend: 'Ext.Container',
        xtype: 'tabletPortraitMain',
        requires: [
            'XX.view.tablet.Menu'
        ],
        config: {
            layout: 'hbox',
            height:'100%',
            items:[{
                xtype: 'tabmenu',
                docked: 'left',
                style: 'border:1px solid red;'
            },{
                xtype: 'panel',
                itemId: 'contentPanel',
                html: 'asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf',
                layout: 'fit',
                height: '100%',
                width: '100%',
                flex: 1.9
            }]
        }
    });
    menu view:

    Code:
    Ext.define('XX.view.tablet.Menu',{    extend: 'Ext.Container',
        xtype: 'tabmenu',
        config: {
            cls: 'mainmenu',
            docked: 'left',
            top: 0,
            left: 0,
            bottom: 0,
            zIndex: 0,
            width: 266,
            padding: '0 0 0 0',
            open: false,
            scrollable: 'vertical',
            defaultType: 'button',
            defaults: {
                textAlign: 'left'
            },
            scrollable: {
                indicators: false
            },
            items: [{
                text: 'Home',
                ui: 'mainmenu',
                iconCls: 'home',
                itemId: 'home'
            },{
                text: 'Find Agents',
                ui: 'mainmenu',
                iconCls: 'file',
                itemId: 'enquiry'
            },{
                hidden: true,
                text: 'Submit Exclusive',
                ui: 'mainmenu',
                iconCls: 'drawer',
                itemId: 'manage'
            },{
                hidden: true,
                text: 'Transaction Tracker',
                ui: 'mainmenu',
                iconCls: 'lightning',
                itemId: 'tracker'
            },{
                hidden: true,
                text: 'Downline Reports',
                ui: 'mainmenu',
                iconCls: 'downline',
                itemId: 'downline'
            },{
                text: 'Salesperson Login',
                ui: 'mainmenu',
                iconCls: 'user',
                itemId: 'account'
            },{
                hidden: true,
                text: 'Settings',
                ui: 'mainmenu',
                iconCls: 'settings',
                itemId: 'settings'
            },{
                xtype: 'component',
                cls: 'divider',
                html: 'SEARCH'
            },{
                text: 'Property Search',
                ui: 'mainmenu',
                iconCls: 'search',
                itemId: 'search'
            },{
                hidden: true,
                text: 'Map',
                ui: 'mainmenu',
                iconCls: 'globe',
                itemId: 'mapsearch'
            },{
                xtype: 'component',
                cls: 'divider',
                html: 'TOOLS'
            },{
                text: 'Square Foot Research',
                ui: 'mainmenu',
                iconCls: 'analysis',
                itemId: 'squarefoot'
            },{
                xtype: 'component',
                cls: 'divider',
                html: 'PROJECTS'
            },{
                text: 'Local Projects',
                ui: 'mainmenu',
                iconCls: 'home',
                itemId: 'local'
            },{
                text: 'Overseas Projects',
                ui: 'mainmenu',
                iconCls: 'globe',
                itemId: 'overseas'
            },{
                xtype: 'component',
                cls: 'divider',
                html: 'RESOURCES'
            },{
                hidden: true,
                text: 'Forms',
                ui: 'mainmenu',
                iconCls: 'form',
                itemId: 'forms'
            },{
                text: 'Research Reports',
                ui: 'mainmenu',
                iconCls: 'research',
                itemId: 'research'
            },{
                text: 'Contact Us',
                ui: 'mainmenu',
                iconCls: 'form',
                itemId: 'contactus'
            },{
                text : 'Notifications',
                ui: 'mainmenu',
                badgeText: '0',
                iconCls: 'form',
                itemId: 'notifications'
            }]
        },
    
    
        setParent: function(parent) {
            this.callParent(arguments);
    
    
            this.maskCmp = parent.add({
                xtype   : 'component',
                cls     : 'mainmenu-mask',
                top     : 0,
                zIndex  : 5000,
                hidden  : true,
                width   : 9999,
                left    : this.getWidth(),
                bottom  : 0
            });
    
    
            this.maskCmp.element.on({
                scope   : this,
                touchend: 'onMaskRelease'
            });
    
    
        },
    
    
        onMaskRelease: function() {
            this.setOpen(false);
        },
    
    
        closeMenu: function(){
            this.setOpen(false);
        },
    
    
        onDestroy: function() {
            this.maskCmp.destroy();
            delete this.maskCmp;
    
    
            this.callParent(arguments);
        },
    
    
        toggle: function() {
            this.setOpen(!this.getOpen());
        },
    
    
        updateOpen: function(open) {
            var scroller = this.getScrollable().getScroller();
    
    
            var targetEl,
                parentCt = this.up();
    
    
            if (!parentCt) {
                return;
            }
    
    
            targetEl = parentCt.innerElement;
    
    
            if (open) {
                targetEl.translate(this.getWidth(), 0, 0);
                this.maskCmp.show();
                scroller.scrollToTop();
            }
            else {
                targetEl.translate(0, 0, 0);
                this.maskCmp.hide();
            }
        }
    });
    portrait main controller:

    Code:
    Ext.define("XX.controller.tablet.PortraitMain", {    extend: 'Ext.app.Controller',
        requires: [
            'XX.view.tablet.Home',
            'XX.view.Account',
            'XX.view.Local',
            'XX.view.Overseas',
            'XX.view.Search',
            'XX.view.Manage',
            'XX.view.Forms',
            'XX.view.Research',
            'XX.view.Training',
            'XX.view.Tracker',
            'XX.view.Enquiry',
            'XX.view.MapSearch',
            'XX.view.Downline',
            'XX.view.Settings',
            'XX.util.Account',
            'XX.view.ContactUs',
            'XX.view.tablet.Menu'
        ],
        config: {
            refs: {
                main: 'tabletPortraitMain',
                toolbar: 'tabletPortraitMain toolbar',
                backButton: 'tabletPortraitMain toolbar #backButton',
                menuButton: 'tabletPortraitMain toolbar #menuButton',
                menu: 'tabmenu',
                menuItem: 'tabmenu button',
                contentPanel: 'tabletPortraitMain #contentPanel',
                manageMenuItem: 'tabmenu #manage',
                downlineMenuItem: 'tabmenu #downline',
                trackerMenuItem: 'tabmenu #tracker',
                settingsMenuItem: 'tabmenu #settings',
                mapSearchMenuItem: 'tabmenu #mapsearch',
                formsMenuItem: 'tabmenu #forms',
                notificationsMenuItem: 'tabmenu #notifications'
            },
            routes: {
                ':viewxtype': 'goToPage'
            },
            control: {
                backButton: {
                    tap: 'backButtonTap'
                },
                menuButton: {
                    tap: 'menuButtonTap'
                },
                menuItem: {
                    tap: 'menuItemTap'
                },
                notificationsMenuItem: {
                    tap: 'notificationsItemTap'
                },
                main: {
                    initialize: 'mainInitialize',
                    navigationMode: 'switchToNavigation'
                }
            }
        },
        navigationView: false,
        init: function() {
            this.callParent(arguments);
        },
        switchToNavigation: function(navigationView) {
            // Set child's title
            var childItem = navigationView.getItems().items.slice(-1)[0];
            this.getToolbar().setTitle(childItem.getTitle());
            // Navigation UI
            this.getBackButton().setHidden(false);
            this.getMenuButton().setHidden(true);
            this.navigationView = navigationView;
        },
        backButtonTap: function() {
            if (this.navigationView) {
                // Set root's title
                this.getToolbar().setTitle(this.navigationView.getTitle());
                // Pop to root
                this.navigationView.reset();
                this.navigationView = false;
            }
            // Restore UI
            this.getBackButton().setHidden(true);
            this.getMenuButton().setHidden(false);
        },
        menuButtonTap: function() {
            this.getMenu().toggle();
            //Helper.alert('XX Tablet','menu tablet has been tapped!');
        },
        mainInitialize: function() {
            //console.log('resetlayout');
            if (location.hash === '') {
                this.redirectTo('home');
            }
            if (Account.getToken()) {
                console.log('table controller main initialize');
                // Load Notification List Count
                /*var store = Ext.create('XX.store.remote.Notifications');
                 var proxy = store.getProxy();
                 var deviceid = device.uuid;
                 proxy.setUrl(Proxy.getUrl()+'LoadPushNotifications?op=push&DeviceID='+deviceid.toString());
                 Helper.setMask(true);
                 store.load({
                 callback: function(records,success) {
                 Helper.setMask(false);
                 if (success) {
                 if(store.getCount() > 0)
                 {
                 this.getNotificationsMenuItem().setBadgeText(store.getCount());
                 }
                 else
                 {
                 this.getNotificationsMenuItem().setBadgeText('0');
                 }
                 // Check status flag and display error message if necessary
                 }
                 else {
                 Helper.alert('','Unable to load data, please try again later.');
                 }
                 },
                 scope: this
                 });*/
                // Show authorised user menu items
                console.log("before");
                this.getApplication().getController('XX.controller.tablet.PortraitMain').resetLayout();
                //this.getApplication().getController('XX.controller.tablet.Main').toggleMode(true);
                console.log("after");
            }
            /*console.log('');
             console.log(location.hash);
             if (location.hash === '') {
             console.log('location hash = nothing');
             this.getApplication().getController('XX.controller.tablet.Main').resetLayout();
             this.redirectTo('home');
             }
             this.getApplication().getController('XX.controller.tablet.Main').resetLayout();
             console.log('after');*/
        },
    
    
        resetLayout: function() {
            /*if (location.hash === '') {
             this.redirectTo('home');
             }*/
            console.log('resetlayout');
            if (Account.getToken()) {
                console.log('table controller main initialize');
                // Load Notification List Count
                /*var store = Ext.create('XX.store.remote.Notifications');
                 var proxy = store.getProxy();
                 var deviceid = device.uuid;
                 proxy.setUrl(Proxy.getUrl()+'LoadPushNotifications?op=push&DeviceID='+deviceid.toString());
                 Helper.setMask(true);
                 store.load({
                 callback: function(records,success) {
                 Helper.setMask(false);
                 if (success) {
                 if(store.getCount() > 0)
                 {
                 this.getNotificationsMenuItem().setBadgeText(store.getCount());
                 }
                 else
                 {
                 this.getNotificationsMenuItem().setBadgeText('0');
                 }
                 // Check status flag and display error message if necessary
                 }
                 else {
                 Helper.alert('','Unable to load data, please try again later.');
                 }
                 },
                 scope: this
                 });*/
                // Show authorised user menu items
                console.log("before");
                this.getApplication().getController('XX.controller.tablet.PortraitMain').toggleMode(true);
                console.log("after");
            }
    
    
        },
        toggleMode: function(loggedIn) {
            if (loggedIn) {
             this.getManageMenuItem().setHidden(false);
             this.getTrackerMenuItem().setHidden(false);
             this.getDownlineMenuItem().setHidden(false);
             this.getSettingsMenuItem().setHidden(false);
             this.getMapSearchMenuItem().setHidden(false);
             this.getFormsMenuItem().setHidden(false);
             this.getNotificationsMenuItem().setHidden(false);
             }
             else {
             this.getManageMenuItem().setHidden(true);
             this.getTrackerMenuItem().setHidden(true);
             this.getDownlineMenuItem().setHidden(true);
             this.getSettingsMenuItem().setHidden(true);
             this.getMapSearchMenuItem().setHidden(true);
             this.getFormsMenuItem().setHidden(true);
             this.getNotificationsMenuItem().setHidden(true);
             }
        },
        menuItemTap: function(button) {
            switch (button.getItemId()) {
                case 'squarefoot':
                    var params = '';
                    /*var userProfile = UserProfile.get();
                     if (userProfile) {
                     params = '&username='+userProfile.get('username')+'&password='+userProfile.get('password');
                     }*/
                    var url = 'https://www.squarefoot.com.sg/component/mobile/?task=api&appid=eb4c4a63416ea178fd28bff0cd03665b'+params;
                    if (window.cordova) {
                        window.open(url,'_blank','toolbar=no,location=no,enableViewportScale=yes');
                    }
                    else {
                        window.open(url,'_blank');
                    }
                    break;
                case 'mapsearch':
                    if (!googleMapIsReady) { // notification.js
                        Helper.alert('Map','Map services are still loading. If problem persists, please kill and restart App.');
                        loadGoogleMap();
                    }
                    else {
                        this.redirectTo(button.getItemId());
                    }
                    break;
                default:
                    this.redirectTo(button.getItemId());
                    //this.redirectTo(button.getItemId() + "/" + button.getText());
                    break;
            }
            console.log(button.getItemId());
            console.log('1');
            //this.getMenu().toggle();
            console.log('2');
        },
        notificationsItemTap: function(button){
            button.setBadgeText('0');
            var params = {};
            var deviceid = device.uuid;
            params['DeviceID'] = deviceid;
            var _this = this;
            _this.getApplication().getController('XX.controller.Notifications').updateReadOn(params);
        },
        goToPage: function(viewXtype) {
            switch (viewXtype) {
                default:
                    this.displayPage(viewXtype);
                    console.log(viewXtype);
                    break;
            }
        },
        refreshPage: function(viewXtype) {
            this.displayPage(viewXtype,true);
        },
        displayPage: function(viewXtype,refresh) {
    
    
            var contentPanel = this.getContentPanel();
            console.log(contentPanel + viewXtype);
    
    
            if(!refresh)
            {
                console.log('not = refresh');
                console.log('displaypage');
                var layout = Ext.create('XX.view.Layout');
                console.log(Ext.Viewport.getOrientation());
                this.initLayout2(['tablet'], 'tablet', 'portrait');
                Ext.Viewport.add(layout);
            }
            else
            {
                var widget = false;
                //try {
                widget = Ext.widget(viewXtype);
                //}
                //catch(e) {
                //console.log(e.message);
                //}
                if (widget) {
                    contentPanel.removeAll();
                    contentPanel.add(widget);
                    //this.getToolbar().setTitle(widget.getTitle());
                }
            }
            //jvar widget = false;
            //try {
            //jwidget = Ext.widget(viewXtype);
            //}
            //catch(e) {
            //console.log(e.message);
            //}
            //jif (widget) {
            //jcontentPanel.removeAll();
            //jcontentPanel.add(widget);
            //this.getToolbar().setTitle(widget.getTitle());
            //j}
    
    
            /*console.log('displaypage');
             var layout = Ext.create('XX.view.Layout');
             console.log(Ext.Viewport.getOrientation());
             layout.initLayout(['tablet'], 'tablet', Ext.Viewport.getOrientation());
             Ext.Viewport.add(layout);*/
    
    
        },
        initLayout2: function (dualLayout, device, orientation) {
            if (Ext.Array.contains(dualLayout, device)) {
                var layout = Ext.create('XX.view.Layout');
                layout.add([
                    {
                        //xtype: device + 'PortraitMain',
                        xtype: 'tabletPortraitMain',
                        itemId: 'portrait',
                        hidden: orientation !== 'portrait'
                    },
                    {
                        xtype: device + 'LandscapeMain',
                        itemId: 'landscape',
                        hidden: orientation !== 'landscape'
                    }
                ]);
            } else {
                layout.add({
                    //xtype: device + 'Main'
                    xtype: 'main'
                });
            }
            layout.device = device;
            layout.orientation = orientation;
            layout.dualLayout = dualLayout;
        }
    
    
    });
    screenshot:

    Screen Shot 2015-01-21 at 11.19.40 am.jpg

  2. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    What is the desired menu functionality? Should the menu be hidden and slide in from the left, revealing the menu, or should it always be visible next to the main content?

    The fiddle below shows a simple example of using the built-in Viewport menu handling functionality.

    Regards,
    Brian


  3. #3
    Sencha User
    Join Date
    Nov 2014
    Posts
    18

    Default

    Hi Sir Brian, Thank you very much for your reply. I've already tried the code and it's working, but currently I'm having a hard time displaying the docked left and right content changing based on clicked menu on the left in IPAD.

    BTW Sir Brian, I'm also having difficulty in device profile, our code for phone is already existing, I was also able to incorporate the device profile detection, but I'm confuse if I need to rewrite the whole code for controllers and views for IPAD, I hope you can give me a sample.Again Thank you very much Sir Brian and God bless you.

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
  •