Permalink
Browse files

Add setUI configuration for change the SliderMenu UI.

Update z-index to solve a problem with Menu item selection.
  • Loading branch information...
1 parent 26324da commit 77561e471e428233a4be25f4d755d02c951eff61 Xevi committed Mar 27, 2012
Showing with 50 additions and 3 deletions.
  1. +9 −0 README.md
  2. +3 −1 app.js
  3. +9 −1 slider_menu/view/Main.js
  4. +11 −1 slider_menu/view/Menu.js
  5. +18 −0 slider_menu/view/SliderMenuContainer.js
View
9 README.md
@@ -89,6 +89,15 @@ and then you can configure a set of parameters:
sliderMenu.setMenuIcon('list'); //Sets icon of menu button to 'list' icon
+###SliderMenu UI
+
+ slidermenu.setMenuToolbarUi('slider-menu-red');
+ slidermenu.setMainToolbarUi('slider-menu-red');
+
+In your app.scss you need to define your custom toolbar UI theme for SliderMenu with something like this:
+
+ @include sencha-toolbar-ui( 'slider-menu-dark', #333, 'flat');
+
Themming
----------
You can change the style of your slider menu, overwriding two classes:
View
4 app.js
@@ -49,7 +49,9 @@ Ext.application({
slidermenu.setTitle('Options...');
slidermenu.setWidth(250);
slidermenu.setMenuIcon('list');
-
+ slidermenu.setMenuToolbarUi('slider-menu-dark');
+ slidermenu.setMainToolbarUi('slider-menu-dark');
+
// Initialize the main view
Ext.Viewport.add(slidermenu);
},
View
10 slider_menu/view/Main.js
@@ -21,7 +21,7 @@ Ext.define('SliderMenu.view.Main', {
width: '100%',
height: '100%',
- style: 'opacity: 1; z-index: 1',
+ style: 'position: absolute; opacity: 1; z-index: 200',
layout: 'card',
menuButtonIcon: 'more',
@@ -189,4 +189,12 @@ Ext.define('SliderMenu.view.Main', {
return true;
},
+ /**
+ * Generic method to change the toolbar ui inside main panel.
+ *
+ * @param {String} ui: The new ui style for the toolbar
+ */
+ setToolbarUi: function(ui){
+ this.getNavigationBar().setUi(ui);
+ },
});
View
12 slider_menu/view/Menu.js
@@ -19,7 +19,7 @@ Ext.define('SliderMenu.view.Menu', {
config: {
//Menu is on top left and z-index of 0 (hidden when menu is not slided)
- style: 'position: absolute; top: 0; left: 0; z-index: 0',
+ style: 'position: absolute; top: 0; left: 0; z-index: 100',
width: '100%',
height: '100%',
@@ -34,6 +34,7 @@ Ext.define('SliderMenu.view.Menu', {
//NOTE: You need to overwride this css class to customize the theme
cls: 'x-slidermenu-menu',
+ ui: 'menu',
docked: 'left',
@@ -76,5 +77,14 @@ Ext.define('SliderMenu.view.Menu', {
this.items.items[0].setTitle(newTitle);
return true;
+ },
+
+ /**
+ * Generic method to change the toolbar ui inside menu panel.
+ *
+ * @param {String} ui: The new ui style for the toolbar
+ */
+ setToolbarUi: function(ui){
+ this.down('toolbar').setUi(ui);
}
});
View
18 slider_menu/view/SliderMenuContainer.js
@@ -115,6 +115,24 @@ Ext.define('SliderMenu.view.SliderMenuContainer', {
},
/**
+ * Sets the toolbar ui from left menu
+ *
+ * @param {Ext.String} ui: The ui to apply at left menu toolbar
+ */
+ setMenuToolbarUi: function(ui){
+ this.getMenu().setToolbarUi(ui);
+ },
+
+ /**
+ * Sets the toolbar ui from main menu
+ *
+ * @param {Ext.String} ui: The ui to apply at left main toolbar
+ */
+ setMainToolbarUi: function(ui){
+ this.getMain().setToolbarUi(ui);
+ },
+
+ /**
* Gets menu item from slidermenu
* @private
*/

0 comments on commit 77561e4

Please sign in to comment.