help

[alessiovalentini]

Hi Wnielson,

Sorry if I contact you here, but I don't find another way of doing it.

I am trying to create a similar UI for a project...

What happens is that when I plug the Slide UI into my project, it works perfectly on the browser, but when I try it on the mobile it doesn't slide at all + the two elements are not completely overlapping.

I have been stuck on this for 2 weeks. I am kind of desperate. Do you think you can help me out? I am sure it's a small thing...

[email protected]

[wnielson]

What device are you seeing this behavior on?

[alessiovalentini]

Thanks for the reply.

iPhone 5 and iPad 1.

Havent tried on Android.

[wnielson]

Are you using the slidenavigation component directly under the Viewport? If it is nested inside of another component issues might arise because it messes with the zindex property.

[alessiovalentini]

I have plugged in the component into my project

Ext.Viewport.add( Ext.create('WC.view.Wrapper') )

where then the wrapper is a List (Menu) and a Main(Main)

    Ext.define('WC.view.Wrapper', {
        extend: 'Ext.Container',
        xtype: 'ObjectTabContainer',

        requires: [
            'WC.view.layout.RecordList',          // Menu
            'WC.view.layout.RightContainer'     // Main
        ],

        config: {

            items: [

                 // Hidden appers to display no connection
                 {
                     xtype  : 'ConnectionStatusIndicator',
                     docked : 'top'
                 },
                 // WC.view.layout.RecordList > list
                {
                    xtype: 'RecordList',
                    id   : 'recordlist'
                },
                // WC.view.layout.RightContainer > toolbars and data
                {
                    xtype: 'RightContainer',
                    id   : 'rightcontainer'
                }
            ]
        }
    });

in terms of z-index I have

List > style : 'position: absolute; top: 0; left: 0; z-index: 2, height:
100%'
RightContainer > style  : 'width: 100%; height: 100%; position: absolute;
top: 0px; left: 0px; opacity: 1; z-index: 3; opacity: 1'

Problem is that on the device I see the two components slightly overlapped
(not completely top to bottom... ) + when I click the button nothing
happens... I have tried to debug as much as possible using alerts and what
happens is that the code stops here, without any type of errors...

Ext.define('WC.controller.SlideCtrl', {
    extend: 'Ext.app.Controller',

    requires: [
    'WC.view.layout.RecordList',
        'WC.view.layout.RightContainer'
    ],

    config: {
    refs: {
    RecordList    : 'RecordList',
            RightContainer: 'RightContainer',
            menuButton    : 'RightContainer RecordInterationToolbar
button[action=openMenu]'
    },

    control: {
            menuButton: {
    tap: 'onOpenMenuButtonTapped'
    },

onOpenMenuButtonTapped: function(){
        alert('0')
        var main = this.getRightContainer();
        var menu = this.getRecordList();
        alert('1') ====================>>>>>> here stops > doesn't even
enters the main.isClosed()
        alert(main.isClosed())
        if (main.isClosed()) {
            alert('call open menu')
            main.openMenu(menu.getOpenAnimDuration());
            alert('after call open menu')
        } else {
            alert('call open close menu')
            main.closeMenu(menu.getCloseAnimDuration());
            alert('after call open close menu')
        }
        alert('end of onOpenMenuButtonTapped')
    }

=========> I should at least get the alert('isClosed')

isClosed: function() {
        alert('isClosed')
        alert(this.getDraggable().offset.x)
        alert('return')
        return (this.getDraggable().offset.x == 0);
    }

And keep in mind that in the browser it looks ok + the controller does its
dirty job!!! Plus the component by itself works perfectly on my device (I
mean same z-index and controller functions)

[pipmossop]

Any update on this issue?