1. #101
    Sencha User
    Join Date
    Jun 2011
    Location
    Paris
    Posts
    29
    Vote Rating
    4
    ronan quillevere is on a distinguished road

      0  

    Default


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

    Code:
    @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;
    }

  2. #102
    Sencha User
    Join Date
    Jul 2012
    Posts
    19
    Vote Rating
    0
    abbysingh is on a distinguished road

      0  

    Default


    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?

  3. #103
    Ext JS Premium Member breckster's Avatar
    Join Date
    Mar 2008
    Posts
    116
    Vote Rating
    0
    breckster is on a distinguished road

      0  

    Default


    Quote Originally Posted by breckster View Post
    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!

  4. #104
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default Waiting for Page to Load

    Waiting for Page to Load


    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:

    Code:
    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).

  5. #105
    Ext JS Premium Member
    Join Date
    Nov 2007
    Posts
    10
    Vote Rating
    0
    andrew.archer is on a distinguished road

      0  

    Default slight config bug

    slight config bug


    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));

  6. #106
    Sencha User biggbest's Avatar
    Join Date
    Jun 2011
    Location
    France
    Posts
    38
    Vote Rating
    5
    biggbest is on a distinguished road

      0  

    Default Problem with Navigation view (bar)

    Problem with Navigation view (bar)


    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 ? :-)
    Last edited by biggbest; 16 Sep 2012 at 11:26 AM. Reason: Issue solved

  7. #107
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    -6
    totalnotme can only hope to improve

      0  

    Default


    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.

  8. #108
    Sencha User
    Join Date
    Jun 2011
    Location
    Paris
    Posts
    29
    Vote Rating
    4
    ronan quillevere is on a distinguished road

      0  

    Default


    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.

  9. #109
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    -6
    totalnotme can only hope to improve

      -1  

    Default


    sorry i think miss understand.

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

  10. #110
    Sencha User
    Join Date
    May 2012
    Posts
    24
    Vote Rating
    -6
    totalnotme can only hope to improve

      -1  

    Default


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

    but dont know how to fix it.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi