Sliding Side Menu

[ronan quillevere]

Here you go, this is the app.scss, do not hesitate to change the colors and show me what yours looks like !

@import 'sencha-touch/default/all';




// Slider
$slider-item-background-color: #494949;
$slider-item-color: white;


$slider-item-border-top: #646464;
$slider-item-border-bottom: #3A3A3A;
$slider-item-selected-border-top: #34ABFF;
$slider-item-selected-border-bottom: $slider-item-border-bottom;


$slider-shadow-color: #222;
$slider-shadow-blur: 10px;
$slider-shadow-spread: 2px;




// Sencha
$toolbar-base-color : #4B4B4B;


// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;




// Your custom code goes here...




/**************** SLIDER ********/


/*List*/
.x-slidenavigation-list.x-list {
    background-color: $slider-item-background-color;
}


/*List toolbar*/
.x-slidenavigation-list .x-toolbar-dark {
    box-shadow: 0px 5px $slider-shadow-blur $slider-shadow-spread $slider-shadow-color;
    z-index: 1;
}


/*Place container*/
.x-slidenavigation-container {
    box-shadow: -5px 0px $slider-shadow-blur $slider-shadow-spread $slider-shadow-color;
}


/*List first item*/
.x-slidenavigation-list .x-list-item:first-child .x-list-item-label {
	border-top: 0;
	border-bottom: 1px solid $slider-item-border-bottom;
}


/*List item*/
.x-slidenavigation-list .x-list-item .x-list-item-label {
	border-top: 1px solid $slider-item-border-top;
	border-bottom: 1px solid $slider-item-border-bottom;
}


.x-slidenavigation-list .x-list-item {
	position: relative;
	color: $slider-item-color;
}


/*List selected item*/
.x-slidenavigation-list .x-list-item.x-item-selected .x-list-item-label {
	border-top-color: $slider-item-selected-border-top;
	border-bottom: solid 1px $slider-item-selected-border-bottom;
}


/*List last item*/
.x-slidenavigation-list .x-list-item:last-child .x-list-item-label {
	border-bottom: solid 1px $slider-item-border-bottom;
}


.x-slidenavigation-list .x-list-item-label {
	font-size: 0.8em;
}

[abbysingh]

Thanks a lot!

I've been trying to fit a nested list into the slide navigation panel but I'm having trouble. Any advice on that?

[breckster]

I'm using the menu with a navigation view and dataview list. I'm running into is a scrolling issue with the list inside the card layout. The list will scroll but then bouces back to the top of the list. So any list larger than what can be displayed on the screen intially, those list items are inacessible.



This issue seems only to appear on Android 2.3.4 on various hardware

I have tried setting "scrollable: false" everywhere with no effect

Any ideas

Thanks

Bump!

[in4p]

In using the Sliding Side Menu, I noticed that at times there was a delay in painting the page that the user selected in the list, especially when that page was loading a list from a large store. The delay occurred the first time the page was selected (as subsequent times it was already cached).

I subclassed and replaced the onSelect function with the following code which displays the loading mask. Hopefully this helps others too. Still some tweaks required, so feel free to add:

onSelect: function(list, item, eOpts) {
  var me = this,
	  store = list.getStore(),
	  index = item.raw.index,
	  container = me.container;
  
  
  //Close the Container First as the Load looks Silly with it open
  this.closeContainer(this.config.selectSlideDuration);
  this.setMasked(
	  {
		  xtype: 'loadmask'
	  }
  );
		  
  if (me._cache[index] == undefined) {
		  var task = Ext.create('Ext.util.DelayedTask', function() {
			  this.delaySelect(list, item, eOpts)
		  }, this);
		  task.delay(this.config.selectSlideDuration); //Have to delay the load task in order to (i) let the slide menu close and (ii) let the load mask display
  }
  else {
	  this.finishSelect(container, index);
  }
},


delaySelect: function(list, item, eOpts) {
  var me = this,
	  store = list.getStore(),
	  index = item.raw.index,
	  container = me.container;
  
  if (Ext.isFunction(item.raw.handler)) {
	  me._cache[index] = item.raw.handler;
  } else {		
	  me._cache[index] = container.add(Ext.merge(me.config.defaults, item.raw));
	  // Add a button for controlling the slide, if desired
	  if ((item.raw.slideButton || false)) {                    
		  me.createSlideButton(me._cache[index], item.raw.slideButton);
	  }
  }
  
  this.finishSelect(container, index);
},


finishSelect: function(container, index) {
  if (Ext.isFunction(this._cache[index])) {
	  this._cache[index]();
  } else {
	  container.setActiveItem(this._cache[index]);
  }
  
  //Remove Mask
  this.setMasked(false);
},

As I said, there are a few tweaks needed. Currently the load mask doesn't animate (it stops the once code to create the subsequent page begins executing).

[andrew.archer]

When running optional custom config on item.raw it was being applied to defaults.

me._cache[index] = container.add(Ext.merge(me.config.defaults, item.raw));

needs to be:

me._cache[index] = container.add(Ext.merge({}, me.config.defaults, item.raw));

[biggbest]

Hi !

First, congratulations for this plugin, we were looking for a menu like that !

Now, I've well implemented it, but it seems that the navigation.view (the default one) doesn't work very well now, I want to use it as some items in the slidenavigation, but the navigationBar created by it always show the Back button, and it doesn't respond :-(

Any known issue with navigationview ?

EDIT: The problem was my fault, I made a navigation view with 3 list, and 1 detail panel. Whatever, it solved. Is there a way to add an icon to the list item ? :-)

[totalnotme]

I have issue with this script.

I have integrate with sencha 2 beta 3 but I can not click the button only slide.

how to fix this.

[ronan quillevere]

I think you should use css to add an icon to your list. Just specify a different class for each item of your list depending on some values of your store with a template (if your are using a store to fill your list of course)

You could use a pseudo-element ::before or ::after to add an icon in your css when you will have managed to add your css classes in your list.

[totalnotme]

sorry i think miss understand.

the left top button and not click only drag can slide the menu.

[totalnotme]

i think I found the problem the title is overlap the button.

but dont know how to fix it.