Sliding Side Menu

[abierbaum]

I added a branch on github that has all the code needed to show the issue between 2.0 and 2.1.

See: https://github.com/vrsource/sencha-SlideNavigation/tree/dev/bug_21

if you load the index_nocmd_20.html and index_cmd_21.html you will see how the code works in 2.0 and 2.1.

It appears to me that there is an issue with the new way that docking and layouts are being handled in 2.1 and that it is conflicting with some of the assumptions made for positioning the slidenavigation list and container.

[Tegola]

Have you tried ST 2.1.0? I am interested to know if I am the only one seeing the issue or if something is significantly broken.

I'm not on my office right now. I'll try on monday and let you know.

[in4p]

I can confirm that the Slide Navigator works under ST 2.1.0.

@abierbaum: a number of things have changed in the css styles. If you did an upgrade from an older version of ST, your issues could be caused by that. I suggest you recompile your sass file (compass compile) and it will likely fix your issues. You may need to update the config.rb file to point to the new sdk directory (now called touch) before doing so.

[abierbaum]

@in4p Thanks for the pointer. You are right, I totally forgot to regenerate the css file. I don't know why I didn't think of that. Works with no problems now.

[Tegola]

Just updated to 2.1 final to see whether NavigationViews would start working again or not.
Well, no, they don't. They push views without animating them.

Here's my streamlined code. SlideNavigation:

Ext.define("MyApp.view.Workspace", {
    extend: 'Ext.ux.slidenavigation.View',
	xtype: 'workspace',
    
    config: {
        slideSelector: 'x-toolbar',
        selectSlideDuration: 200,
        
        list: {
            width: window.innerWidth*0.8,
            maxDrag: window.innerWidth*0.8,
            grouped: false,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                title: 'Navigation'
            }]
        },
        
        items: [
			{
				xtype: 'mytasks',
				title: 'My tasks',
        		slideButton: {
        			selector: 'titlebar',
        			text: 'Menu',
        			iconCls: false,
        			align: 'left'
        		}
			}
        ]
    }
});

NavigationView:

Ext.define('MyApp.view.MyTasks', {
	extend: 'Ext.NavigationView',
	xtype: 'mytasks',
	
	config: {
		title: 'My Tasks',
		
		navigationBar: {
			defaults: {
				align: 'right'
			},
			items: [
				{ name: 'newtask', text: 'New' },
				{ name: 'edittask', text: 'Edit', hidden: true }
			]
		},
	
		items: {
			xtype: 'tasklist',
			title: 'My Tasks'
		}
	}
});

Hope this can be fixed easily.

[zonaib]

hey wnielson ... great work

i have a problem , when i made a package then it gave me error
Cannot call method 'forEach' of undefined

so i need any suggestion...

thanks

[jhennard]

Is anyone having issues using this component with Pickers?

When I use a DatePickerFields within the main content area the Picker is displaying within the left menu navigation pane and not the main content area. The example below shows what happens when I click on the DOB DatePickerField.

Capture.PNG

[wnielson]

Just updated to 2.1 final to see whether NavigationViews would start working again or not.
Well, no, they don't. They push views without animating them.

I've updated this component to work with 2.1. I'll be updating the code in the repository shortly.

[wnielson]

Is anyone having issues using this component with Pickers?

When I use a DatePickerFields within the main content area the Picker is displaying within the left menu navigation pane and not the main content area. The example below shows what happens when I click on the DOB DatePickerField.

I've never seen this happen before. Perhaps you can play around with the z-index values and see if you can get a configuration that works. Let me know if you get it working and I'll update the code.

[jhennard]

Not sure if this fix will work for everyone, but setting the z-index of the container in createContainer to 4 resolved the issue for me.

 style: 'width: 100%; height: 100%; position: absolute; opacity: 1; z-index: 4',