Permalink
Browse files

Now just add the controller to use this plugin! Easier and with no ot…

…her deps
  • Loading branch information...
1 parent 147430e commit b4127ac9e5fa5d1c483eb4d964bb7c596eb86cea @rhapsodyv committed May 29, 2012
View
@@ -19,16 +19,17 @@ Ext.application({
//You must to put SliderMenu dependencies inside
// views, controllers, stores and models
views: [
- 'SliderMenu.view.SliderMenuContainer',
//Add here your view dependencies
'SliderMenuDemo.view.Option1',
'SliderMenuDemo.view.Option2',
'SliderMenuDemo.view.Option3',
],
+ //SliderMenu: Just need to add the controller!!
controllers: ['SliderMenu.controller.SliderMenuController'],
+ //Default Store. You can just provide your store with storeId: MenuOptionsStore
stores: ['SliderMenu.store.MenuOptions'],
- models: ['SliderMenu.model.MenuOption'],
+ models: [],
icon: {
57: 'resources/icons/Icon.png',
@@ -2,11 +2,11 @@
* @class SliderMenu.controller.SliderMenuController
* @extends Ext.app.Controller
*
- * Controller for SliderMenu. All events are controlled here.
+ * Controller for SliderMenu. All events are controlled here.
* So, you must implement the methods to accept each action launched
* by Menu.
*
- * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
+ * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
*/
Ext.define('SliderMenu.controller.SliderMenuController', {
@@ -15,8 +15,11 @@ Ext.define('SliderMenu.controller.SliderMenuController', {
requires: [
'SliderMenu.view.Main',
'SliderMenu.view.Menu',
+ 'SliderMenu.model.MenuOption',
],
-
+
+ models: ['SliderMenu.model.MenuOption'],
+
config: {
refs: {
main: 'maincard',
@@ -29,7 +32,7 @@ Ext.define('SliderMenu.controller.SliderMenuController', {
menuButton: {
tap: 'onOpenMenuButtonTapped'
},
-
+
menu: {
itemtap: 'onMenuOptionTapped',
init: 'onInitMenu',
@@ -48,7 +51,7 @@ Ext.define('SliderMenu.controller.SliderMenuController', {
},
/**
- * When the main menu is tapped (only when it's masked -> menu is open)
+ * When the main menu is tapped (only when it's masked -> menu is open)
* we close slider menu
*/
onMainTapped: function(){
@@ -59,15 +62,15 @@ Ext.define('SliderMenu.controller.SliderMenuController', {
},
/**
- * When we push a view from Main (Ext.navigation.View), we need to hide
+ * When we push a view from Main (Ext.navigation.View), we need to hide
* menu button
*/
onMainPush: function(){
this.getMenuButton().hide();
},
/**
- * When we pop a view from Main (Ext.navigation.View), we need to show
+ * When we pop a view from Main (Ext.navigation.View), we need to show
* menu button again
*/
onMainPop: function(){
@@ -76,7 +79,7 @@ Ext.define('SliderMenu.controller.SliderMenuController', {
/**
* Fires after initialization menu.
- * Change initial view of main to default view associated
+ * Change initial view of main to default view associated
* to default option
*/
onInitMenu: function(record, index){
@@ -4,26 +4,26 @@
*
* Defines store of MenuOptions that are showed inside SliderMenu.view.Menu.
* It must be modified to adapt SliderMenu at your app.
- * By default, the data is hardcored inside class, but you can get it using a
+ * By default, the data is hardcored inside class, but you can get it using a
* proxy (Ajax, Rest, LocalStorage...).
*
- * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
+ * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
*/
Ext.define('SliderMenu.store.MenuOptions', {
extend: 'Ext.data.Store',
-
+
requires: [,
+ 'SliderMenu.view.Option1',
],
-
+
config: {
model: 'SliderMenu.model.MenuOption',
storeId: 'MenuOptionsStore',
-
+
//Customize your menu options
data: [
- {id: 1, view: 'SliderMenuDemo.view.Option1', iconCls: 'action', iconMask:true, text:'Option 1'},
- {id: 2, view: 'SliderMenuDemo.view.Option2', iconCls: 'action', iconMask:true, text:'Option 2'},
- {id: 3, view: 'SliderMenuDemo.view.Option3', iconCls: 'action', iconMask:true, text:'Option 3'},
+ //One option working with this store as example...
+ {id: 1, view: 'SliderMenu.view.Option1', iconCls: 'action', iconMask:true, text:'Option 1'},
]
}
-});
+});
View
@@ -5,13 +5,13 @@
* The right view of SliderMenu, by default is a NavigationView
* that it has inside a container (mainwrapper).
*
- * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
+ * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
*/
Ext.define('SliderMenu.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'maincard',
-
+
requires: [
'SliderMenu.view.MainWrapper'
],
@@ -28,9 +28,9 @@ Ext.define('SliderMenu.view.Main', {
menuWidth: 250,
//You need to overwride this css class to customize the theme
- cls: 'x-slidermenu-main',
+ cls: 'x-slidermenu-main',
- //This component is draggable
+ //This component is draggable
//(it allows to show or not the left menu)
draggable:{
direction: 'horizontal',
@@ -104,17 +104,18 @@ Ext.define('SliderMenu.view.Main', {
var bar = this.getNavigationBar();
if (bar.titleComponent.element){
bar.titleComponent.element.setWidth('auto');
- }
-
+ }
+
bar.titleComponent.setTitle(title);
- bar.refreshProxy();
+ //FIXME? sencha 2.0.1 doesnt have this method...
+ //bar.refreshProxy();
return true;
},
/**
* Closes the slide menu.
- *
+ *
* @param {Ext.Number} duration: Animation duration
* @return {Ext.Boolean} false: duration is not valid
* true: otherwise
@@ -125,10 +126,10 @@ Ext.define('SliderMenu.view.Main', {
this.swapMenu(0, duration, false); //Sets offset to 0 (close menu)
return true;
},
-
+
/**
* Opens the slide menu.
- *
+ *
* @param {Ext.Number} duration: Animation duration
* @return {Ext.Boolean} false: duration is not valid
* true: otherwise
@@ -149,15 +150,15 @@ Ext.define('SliderMenu.view.Main', {
constraint.min.x = offsetX;
constraint.max.x = offsetX;
this.slideMenu(offsetX, duration);
-
+
if(masked){
//open menu -> create a special mask to detects tap events
this.setMasked({
xtype: 'mask',
listeners: {
tap: function(){
//Main (this.parent) fires a tap event only when the main is wrapped
- this.parent.fireEvent('tap');
+ this.parent.fireEvent('tap');
}
}
})
@@ -170,10 +171,10 @@ Ext.define('SliderMenu.view.Main', {
* Slides the menu changing offset to 'x' with an slide animation of
* 'duration' ms.
* If value of 'x' or 'duration' is undefined -> return false
- *
+ *
* @param {Integer} x: Value of the new offset.x
* @param {Integer} duration: Value of the animation duration effect.
- *
+ *
* @return {Boolean} If value of 'x' or 'duration' is undefined then return false
* otherwise return true.
*/
@@ -197,4 +198,4 @@ Ext.define('SliderMenu.view.Main', {
setToolbarUi: function(ui){
this.getNavigationBar().setUi(ui);
},
-});
+});
@@ -0,0 +1,38 @@
+/**
+ * @class SliderMenu.view.Option1
+ * @extends Ext.Panel
+ *
+ * One option working with this store as example...
+ * Option 1 Panel
+ *
+ * @author Xevi Gallego (wozznik@gmail.com) (@wozznik)
+ */
+Ext.define('SliderMenu.view.Option1', {
+ extend: 'Ext.Panel',
+ xtype: 'option1card',
+
+ requires: [
+
+ ],
+
+ config: {
+ title: 'Option 1',
+
+ items: {
+ xtype: 'button',
+ centered: true,
+ text: 'Push new view',
+ listeners: {
+ tap: function(){
+ var panel = Ext.create(Ext.Panel, {
+ title: 'Panel 2',
+ html: 'Hello, my name is Panel 2....',
+ });
+
+ this.parent.parent.parent.push(panel);
+ }
+ }
+ }
+ }
+
+});

0 comments on commit b4127ac

Please sign in to comment.