Sliding Side Menu

[wnielson]

Hi wnielson,

I am trying to use the slide navigation in one of our projects. I am facing some issues when displaying aligned text in the list can you suggest how i can achieve this.

This is how i would like to show the list when it is opened.
<Image> <Test> <Count>,

So in the title of each item i am formatting like this

title: '<div class="sncontainer">' + 
'<img src="resources/images/Chrysanthemum.jpg" />' +           '<div class="item">' +          '<span class="lefttext">Big Item Name</span>' +          '<span class="righttext">20</span>' +          '</div>' +        '</div>'

CSS:

.sncontainer {    display: inline-block;    -webkit-box-orient:horizontal;    -webkit-box-pack:start;    -webkit-box-align:start;    width: 100%;    height: 32px;     img     {        float:left;        width: 32px;        height: 32px;        -webkit-box-shadow: 2px 2px 2px 2px #88888;    }     .item     {        margin-top: 8px;        margin-left: 40px;        font-family: Arial;        font-size: 12px;        font-weight: bold;                         }     .lefttext    {        float: left;    }            .righttext    {        float: right;        background: #484848;        border: 1px solid #888;    }}

My Problem is that, as the list is occupying 100% i am not able to see the right aligned text in the list when the menu is opened.

If you target the "x-list-item-inner" element and fix the width you should be able to achieve what you want.

[toorshia]

@koladarci

Take a look at https://github.com/toorshia/jam

Never mind the whole "jam jar" thing, that's just my creative side overreacting


@wnielson

I hope you're OK with how I frankensteinized your menu
I didn't put any credits yet but I'll make sure you're there.

One question - you've stated it's an MIT license. But as far as I know ST2 is GPL (or is it lGPL) which essentially makes your code GPL, right? Sorry for off-topic, just want to make sure my wires are not crossed...

[netlogic]

I would like to thank Weston for posting his work. This is an excellent example.
I have hacked the code quickly to support a right button so that a right view panel can be hidden and shown. Feel free to cleanup the code. This was just so I could get a proof of concept done.

I modified view.js for the plugin (attached in zip) and in the example main.js (also attached zip) you simply do the following:

Under slideButtonDefaults. Add

        rightViewDisplayDefaults : {
            selector: 'toolbar'
        },

Then if you want a right view display button on the toolbar put in the property after the slideButton property:

            slideButton: true,
            rightViewDisplay: true, 

or you can do something like.

            rightViewDisplay: {
                iconMask: false,
                iconCls: null,
                text: 'friends'
            },

The last thing for you to do is to support a dynamically created right view. The plugin will call onRightViewDisplayContainerCreated when it has created the container to hold the your right view.

Simply implement a function like the following in main.js attached.

    /** give the user a chance to update the container for the right side view
     *
     * @param container container holding the right view
     */
    onRightViewDisplayContainerCreated : function( container ) {
        /* add to the container whatever you want */
        console.log("create right view");


        var panel = Ext.create('Ext.Panel', {
            html: 'Simple right panel'   ,
            height : 20
        });
       container.setItems( [ panel ]  );
    }

Also I like to thank everyone for this community support. The premium help forum from sencha pales in comparison to this forum.

[ryeo]

To start off...I want to thank "wnielson" and other contributors for creating and expanding on the menu functionality. I have been tweaking this on and off for a couple of months. One of the things I would like to tweak is to prevent the overdrag when you slide the main container to the right.

ryeo

FYI....just found the solution...set maxDrag...thanks!

[rhytha1]

Thank you for the slider, it works great.

I like to add additional icon to the top bar apart from the "more" button.

I edited by adding more icons list me._slideButtonConfig .

me._slideButtonConfig = {
            items:[{
            xtype: 'button',
            iconMask: true,
            iconCls: 'more',
            name: 'slidebutton'},{
            xtype: 'button',
            iconMask: true,
            iconCls: 'settings',
            name: 'settings'},
            ],
            listeners: {
                release: me.toggleContainer,
                tap: function(button, e) {
                    // Need this to stop auto-selecting any component
                    // hidden beneath the container.
                    e.preventDefault();
                },scope: me
            }};

But i am not able to make this work, i am new to senchatouch, so excuse if this is a silly mistake

[another_i]

I also have trouble with navigationView and slideNavigation. But I try create slideNavigation component as one of navigationViews. Could anyone help me solve this, please? Code example is here:
https://github.com/wnielson/sencha-SlideNavigation/issues/21

[in4p]

Hey @another_i,

I'm pretty sure what you're encountering with the 'fullscreen' has nothing to do with the sliding navigation code. It has to do with how Sencha handles nesting containers which are trying to lay themselves out.

Can I ask you a better question though? Why are you trying to nest the slide in the navigation view? How are you going to handle two toolbars when you push the view?

I also have trouble with navigationView and slideNavigation. But I try create slideNavigation component as one of navigationViews. Could anyone help me solve this, please? Code example is here:
https://github.com/wnielson/sencha-SlideNavigation/issues/21

[ThiemNguyen]

Hello everyone,
Having a deeper look at the source code, I see that the slide menu extends an Ext.List.
Is it possible to "customize" the sliding menu? I mean I don't want to use basic list. I want to put other components in it (buttons, images,etc.) and want to change screen when click them.
Highly appreciate if you have any ideas. Thanks.

[rhytha1]

You can try to use this, it has menus and other such...this is not by me but by another user who has replied in this thread...

https://github.com/toorshia/jam

[another_i]

Can I ask you a better question though? Why are you trying to nest the slide in the navigation view?

Sure.

I need to create such structure of application:
1. main app NAVIGATION (grouped list, for example) ?
2. LIST of items (simple list) ?
3. FORM for entity which can include other lists and forms (they are many- and single-end related entities of the opened entity).
In the form I want to use slideNavigation panel for select form for a general thing or forms/lists for the related ones. For now I use TabPanel with bottom scrollable tabBar for this purpouses but it isn't so user friendly such as slideNavigation.
And Ext.navigationView contains of all of this (NAVIGATION, LISTs, FORMs).
If there are other constructively ways of the creating such structure, please let me know.

How are you going to handle two toolbars when you push the view?

Of course I don't want handle two toolbars. And in the best way I want use only navigationView's toolbar. If I open the FORM I want that the navigationView's toolbar can be used in the slideNavigation component and can be slided for viewing FORM's navigation. But in the first time I want run slideNavigation inside Ext.navigationView though. )

Thanks.