Sliding Side Menu

[Tegola]

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

Where can I get the updated version other than the repository?

Thanks

[wnielson]

Where can I get the updated version other than the repository?

Thanks

I've just added the new version to GitHub. Besides support for Sencha Touch 2.1, it also add a number of other new features such as events and integrated (and configurable) styling.

[coolfish]

Thanks for this, wneilson!

Someone had previously posted an .xdc of this. Is there a guideline on how to create importable components? I'm trying by adding a component, requiring the sliding menu class, but the configuration options are constantly screwing up - simply copy and pasting the config objects eventually gets to a point where Architect can no longer find the 'config' property (inline html doesn't get escaped properly, or something along those lines).

Thanks again!

[s0b]

Hi!

Very much thanks for this wnielson, is awesome!

Could be this done on both sides? To place a slide menu in the right side too?

Thanks

[wnielson]

Thanks for this, wneilson!

Someone had previously posted an .xdc of this. Is there a guideline on how to create importable components? I'm trying by adding a component, requiring the sliding menu class, but the configuration options are constantly screwing up - simply copy and pasting the config objects eventually gets to a point where Architect can no longer find the 'config' property (inline html doesn't get escaped properly, or something along those lines).

Thanks again!

I've never used Architect and don't have access to a copy of it, so hopefully someone else can help you out with this.

[wnielson]

Hi!

Very much thanks for this wnielson, is awesome!

Could be this done on both sides? To place a slide menu in the right side too?

Thanks

The current implementation won't support this. It would be possible to add, but it isn't a trivial addition.

[coladarci]

So, like everyone else, I love this plugin.

In my application, I'd like to de-couple the items in the navigation from the sections they will show on click. (Think slide-out profile with a few links that I will have custom handlers for).

It seems your example is much like a tabpanel, where the point of it is to easily jump between sections - I'm simply looking to leverage the slide mechanics, etc.

Is this doable or should I just consider writing something simpler from scratch?

Thanks again for this - it's amazing work.

[toorshia]

@coladarci

Well, I pretty much decoupled everything except for menu button click - I even removed draggable feature, just menu button click remains, with content sliding to the side to reveal menu.

Menu item handlers are custom, they handle menu closing along with whatever I need to open.

I have to pull it out of the project I'm currently working on (top-secret hush-hush ), so be patient for a day or two 'till it's ready

[wnielson]

So, like everyone else, I love this plugin.

In my application, I'd like to de-couple the items in the navigation from the sections they will show on click. (Think slide-out profile with a few links that I will have custom handlers for).

It seems your example is much like a tabpanel, where the point of it is to easily jump between sections - I'm simply looking to leverage the slide mechanics, etc.

Is this doable or should I just consider writing something simpler from scratch?

Thanks again for this - it's amazing work.

Thanks, glad you like it! While the component isn't designed to be used in such a way, it doesn't sound like achieving what you want would be too difficult. You can manually manipulate the component's store, which controls what items are displayed in the navigation list and you can also manually control what item is active in the main container. Hope that helps a little--good luck,

[mpasumarthi]

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.