1. #1
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    43
    Vote Rating
    0
    sailei1 is on a distinguished road

      0  

    Default Sencha Touch 2 Menu

    Sencha Touch 2 Menu


    02b893e7-bcf7-3c45-a75d-ef032c8fd388.png
    Code:
    /**
     * @Author sai
     */
    Ext.define("Sencha.view.Main", {
        extend : 'Ext.tab.Panel',
        xtype : 'Main',
        //requires: ['Sencha.view.MenuButton','Sencha.view.MenuItemButton'],
        config : {
    	      tabBar : {
    			docked : 'bottom'
    		},
    		scrollable :{
    			direction : 'horizontal'
    		},
    		items:[{
    			title : '首页',
    			iconCls : 'home',
    			loadMask : true,
    			html: ' Screen 1'
    		}, {
    			title : '应用超市',
    			iconCls : 'user',
    			loadMask : true,
    			html: 'Screen 2'
    	        }],
    	listeners : {
    
    
    		initialize : function(panel) {
    		  
    		    debugger;
    		  var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom;
    			 var el = document.createElement("div");
    			 el.setAttribute("class","x-tab-normal x-tab x-iconalign-center x-tab-icon x-layout-box-item x-stretched");
    			 b.parentNode.insertBefore(el,b);
    			 var button=Ext.create('Sencha.view.MenuButton',{left:10,bottom:0}).element.dom;
    				 el.appendChild(button);
    				 var div = document.createElement("div");
    				 var style="position:absolute; padding: 10px; height: 62px !important;bottom:-20px !important; width: 62px !important; background:url(resources/images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
    				 div.setAttribute("style",style);
    				 div.setAttribute("id","radius");
    				 el.appendChild(div);
    				 var items=[
                                  {xtype: 'menuitembutton',iconCls:'user',route:'contact',id:'test01',t:'test01'},
                                  {xtype: 'menuitembutton',iconCls:'user',route:'mail',id:'test02',t:'test02'},
                                  {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test03',t:'test03'},
                                  {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test04',t:'test04'},
                                  {xtype: 'menuitembutton',iconCls:'user',route:'app',id:'test05',t:'test05'}
                                  ];
    				 Ext.Viewport.add(items);
    		
    		
    		    }
    		}
        }
        })
    
    
    /**
     * 快捷菜单控制器
     * @Author sai
     */
    Ext.define('Sencha.controller.Menu', {
    	extend: 'Ext.app.Controller',
    	requires: [
    		'Sencha.view.MenuItemButton',
    		'Sencha.view.MenuButton',
    		'Ext.util.DelayedTask'
    	],
    
    
    	config: {
    			before: {
    	   showContact: 'authenticate'
    		},
    	    routes: {
    	            'mail':'showMail',
    	            'contact': 'showContact',
                    'main':'showMain'
    	        },
    
    
    		refs: {
    			menubutton: 'menubutton',
    			menuitembutton: 'menuitembutton'
    		},
    
    
    		control: {
    			menubutton: {
    				tap: 'onMenuButtonTap'
    			},
    			menuitembutton: {
    				tap: 'onMenuItemButtonTap'
    			}
    		}
    	},
    
    
    
    
    
    
    
    
    
    
    	/**
    	 *
    	 * @param {} button
    	 */
    	onMenuItemButtonTap: function(button) {
    		var	menuButton = Ext.ComponentQuery.query('menubutton')[0];
    		button.addCls('tapped');
    		button.setZIndex(0);
    		this.closeMenu(menuButton);
    		//var h= this.getApplication().getHistory();
    		this.redirectTo(button.getRoute());
    	},
    
    
    	/**
    	 *
    	 * @param {} menuButton
    	 */
    	onMenuButtonTap: function(menuButton) {
    		if (!menuButton.getIsOpen()) {
    			// open menu
    			this.openMenu(menuButton);
    		} else {
    			// close Menu
    			this.closeMenu(menuButton);
    		}
    	},
    
    
    
    
    	openMenu: function(menuButton) {
    
    
    	    Ext.Viewport.setMasked(true);
    	   var masks=  Ext.ComponentQuery.query('mask');
    	   for(var i=0, max=0; i<masks.length; i++){
    		    max = Math.max( max,masks[i].getZIndex() || 0 );
    		   if(!masks[i].isDisabled()){
    			   masks[i].addListener('tap',function(){
    				   Ext.Viewport.setMasked(false);
    					var	items = Ext.ComponentQuery.query('menuitembutton'),menuButton=Ext.ComponentQuery.query('menubutton')[0];
    					menuButton.replaceCls('open', 'close');
    					  if(Ext.get("bg")){
    					 Ext.get("bg").destroy();}
    					 
    					 var left= document.body.clientWidth*0.5;
    					  var bottom= 12;
    					Ext.each(items, function(item, index) {
    						if (item.getCls().indexOf('tapped') === -1) {
    							item.replaceCls('open', 'close');
    							item.setLeft(left);
    							item.setBottom(bottom);
    							item.setZIndex(0);
    							item.fireEvent('hide');
    						} else {
    					
    							var task = Ext.create(
    								'Ext.util.DelayedTask',
    								function() {
    									item.removeCls('menuitembutton');
    									item.setLeft(left);
    									item.setBottom(bottom);
    									item.removeCls('tapped');
    								}
    							);
    							item.fireEvent('hide');
    							task.delay(900);
    					
    						}
    					});
    					menuButton.setIsOpen(false);
    				   
    
    
    
    
    			   });
    		   }
    		}
    	    var el = document.createElement("div"); 
    	     el.setAttribute("class","s-bbox");
    	     el.setAttribute("id","bg");
    	     Ext.Viewport.element.appendChild(el);
    	    
    		var	items = Ext.ComponentQuery.query('menuitembutton'),
    			bottom = menuButton.getBottom(),
    			left = menuButton.getLeft(),
    			radius = 150,
    			abschnitte = items.length - 1,
    			winkel = 130 / abschnitte;
    
    
    		menuButton.replaceCls('close', 'open');
    		//debugger;
    		// if(items.length=='0'){return;} 
    		if(items.length=='1'){
    		    items[0].addCls('menuitembutton');
    		    items[0].replaceCls('close', 'open');
    		    var left= document.body.clientWidth*0.5;
    		    var bottom= 160;
    		    items[0].setLeft(left);
    		    items[0].setBottom(bottom);
    		    items[0].setZIndex(max+1);
    		    items[0].fireEvent('show');
    		    
    		}
    		else{
    		
    		Ext.each(items, function(item, index) {
    			item.addCls('menuitembutton');
    			item.replaceCls('close', 'open');
    
    
    			var currentAngle = (155 - (winkel * (abschnitte - index))),
    				radiant = Math.PI / 180,
    				currnetRadiant = radiant * currentAngle,
    				x = Math.round(Math.cos(currnetRadiant) * radius),
    				y = Math.round(Math.sin(currnetRadiant) * radius);
    
    
    			item.setLeft(document.body.clientWidth*0.5 + x);
    			item.setBottom(bottom + y);
    			item.setZIndex(max+1);
    			item.fireEvent('show');
    		});}
    
    
    		menuButton.setIsOpen(true);
    	},
    
    
    	closeMenu: function(menuButton) {
    	    
    
    
    	    Ext.Viewport.setMasked(false);
    	   
    		var	items = Ext.ComponentQuery.query('menuitembutton');
    		menuButton.replaceCls('open', 'close');
    		if(Ext.get("bg")){
    		 Ext.get("bg").destroy();}
    		 
    		 var left= document.body.clientWidth*0.5;
    		  var bottom= 12;
    		Ext.each(items, function(item, index) {
    			if (item.getCls().indexOf('tapped') === -1) {
    				item.replaceCls('open', 'close');
    				item.setLeft(left);
    				item.setBottom(bottom);
    				item.setZIndex(0);
    				item.fireEvent('hide');
    			} else {
    
    
    				var task = Ext.create(
    					'Ext.util.DelayedTask',
    					function() {
    						item.removeCls('menuitembutton');
    						item.setLeft(left);
    						item.setBottom(bottom);
    						item.removeCls('tapped');
    					}
    				);
    				item.fireEvent('hide');
    				task.delay(900);
    
    
    			}
    		});
    		menuButton.setIsOpen(false);
    	},
    	showContact:function(){
    		debugger;
    	   
    
    
    	    
    	},
    	showMain:function(){
    	    debugger;
    	    
    	},
    	showMail:function(){
    	    debugger;
    	},
    	authenticate:function(action){
    		debugger;
    		 action.resume();
    //		var usercode=  window.localStorage.getItem("usercode")
    //		if(usercode){
    //		 action.resume();}else{
    //			
    //		 }
    	}
    });
    
    
    
    /**
     * @Author sai
     */
    Ext.define('Sencha.view.MenuButton', {
    	extend: 'Ext.Button',
    	requires: ['Ext.Button'],
    	alias: 'widget.menubutton',
    	xtype: 'menubutton',
    
    
    	config: {
    		//iconCls: 'add',
    		ui : 'pathmenu',
    		iconMask: true,
    	
    		height: 50,
    		width: 50,
    		zIndex:'10',
    		cls: 'menubutton',
    		listeners:{
    			'hide':function(){
    			    var div = document.getElementById("radius"); 
    			    var style="display:none";
    			    div.setAttribute("style",style);
    			},
    			'show':function(){
    			    //var left=parseInt(this.getLeft())-parseInt(5);
    			    var left=3;
    			    var div = document.getElementById("radius"); 
    			    var style="position:absolute; padding: 10px; height: 62px !important; width: 62px !important; left: "+left+"px !important; bottom: 5px !important; background:url(images/roB.png) 0 0 no-repeat;background-size:100% 100%;"
    			    div.setAttribute("style",style); 
    			}
    			},
    		isOpen: false
    	}
    });
    
    
    
    /**
     * 快捷菜单选项
     * @Author sai
     */
    Ext.define('Sencha.view.MenuItemButton', {
    	extend: 'Ext.Button',
    	alias: 'widget.menuitembutton',
    	xtype: 'menuitembutton',
    
    
    	config: {
    		iconMask: true,
    		ui : 'pathmenu',
    		t:'',
    		height: 40,
    		width: 40,
    		zIndex:'0',
    		cls: 'menuitembutton',
    		isActive: false,
    		listeners:{'initialize':function(){
    		   this.setLeft(document.body.clientWidth*0.5);
    		   this.setBottom(15);
    		   this.setStyle('margin-left:-20px');
    		   var el = document.createElement("div"); 
    		   el.id=this.getId()+'-field';
    		   el.innerHTML=this.getT();
    		   el.setAttribute("class", "s-text");
    		   el.setAttribute("style","display:none;");
    		   Ext.Viewport.element.appendChild(el);
    		},
    		'resize':function(){
    		   // debugger;
    		    this.setLeft(document.body.clientWidth*0.5);
    		    this.setBottom(15);
    		},
    		'show':function(){
    		    //debugger;
    		    var id=this.getId()+'-field';
    		    var el=document.getElementById(id);
    			   var b=this.getBottom()-20;
    			   var  style='left:'+this.getLeft()+'px !important; bottom:'+b+'px !important; margin-left:-20px; z-index: '+this.getZIndex()+'!important;';
    			   el.setAttribute("style",style);
    		},
    		'hide':function(){
    		    //debugger;
    		    var id=this.getId()+'-field';
    		    var el=document.getElementById(id);
    		    el.setAttribute("style","display:none;");
    		    
    		}
    		},
    		route: ''
    	}
    });
    css

    Code:
    .x-button.x-button-pathmenu{background:url(../images/ro.png) 0 0 no-repeat;background-size:100% 100%;/*background-color:#f7f7f7;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(10%, #ebebeb), color-stop(65%, #f7f7f7), color-stop(100%, #f9f9f9));background-image:-webkit-linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);background-image:linear-gradient(top, #dedede,#ebebeb 10%,#f7f7f7 65%,#f9f9f9);border:3px solid #fff;*/border-radius:1.75em;padding:0.5em;border:0;}
    .x-button.x-button-pathmenu.menubutton{background:url(../images/roa.png) 0 0 no-repeat;background-size:100% 100%;}
    .x-button.x-button-pathmenu.open{-webkit-transform:rotate(360deg) translateZ(0)}
    .x-button.x-button-pathmenu.close{-webkit-transform:rotate(-360deg) translateZ(0)}
    .x-button.x-button-pathmenu.menubutton{-webkit-transition:all 300ms}
    .x-button.x-button-pathmenu.menubutton.open{-webkit-transform:rotate(45deg) translateZ(0);
    	background:url(../images/roa.png) 0 0 no-repeat #1E93E4;
    	background-size:100% 100%;
    }
    .x-button.x-button-pathmenu.menubutton.close{-webkit-transform:rotate(0deg) translateZ(0)}
    .x-button.x-button-pathmenu.menuitembutton{-webkit-transition-duration:300ms;-webkit-transition-property:opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55);opacity:1}
    .x-button.x-button-pathmenu.menuitembutton.tapped{-webkit-transform:rotate(180deg) scale(4) translatez(0);opacity:0}
    
    
    .s-bbox{height:135px;width:270px;
    background:none;
    background:-webkit-gradient(radial,bottom center,0,bottom center,100,from(rgba(0,0,0,0.4)),color-stop(80%,rgba(0,0,0,0.6)),to(rgba(0,0,0,0.2)));
    background:-webkit-radial-gradient(bottom center,135px 135px,rgba(0,0,0,0.4) 0%,rgba(0,0,0,0.6) 80%,rgba(0,0,0,0.2) 100%);
    background-image: radial-gradient(bottom center, circle, rgba(50,50,50,1) 0%,  rgba(68,68,68,1) 100%);
    border-radius:135px 135px 0 0;position:absolute;left:50%;margin-left:-135px;bottom:3em;}
    .s-text{
    	position:absolute; height: 14px !important; width: 40px !important;  text-align:center; font-size:12px; color:#fff; font-weight:bold;
    	-webkit-transition-duration: 300ms;-webkit-transition-property: opacity, left, bottom, -webkit-transform;-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);}
    Chinese

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the contribution
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    395
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Thanks for sharing...

    Thanks for sharing...


    Thanks for sharing....I think it is missing some files when I test it. This is what I see, it says missing: roB.png, roa.png and ro.png.

    Is there a live example we can see online?
    Attached Images

  4. #4
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    43
    Vote Rating
    0
    sailei1 is on a distinguished road

      0  

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Posts
    45
    Vote Rating
    1
    anilvardhan.p is on a distinguished road

      0  

    Default Getting Error : uncaught TypeError: Cannot read property 'dom' of null

    Getting Error : uncaught TypeError: Cannot read property 'dom' of null


    Hi Sai,
    After adding the code i am getting this error. I am using sencha touch 2.3.
    Could you please help me on fixing this.

    inside intialize fucntion:
    var b=panel.getTabBar().element.down('div[class^="x-tab-normal x-tab x-iconalign-center"]:nth-child(2)').dom;

    here its showing the error.
    Uncaught TypeError: Cannot read property 'dom' of null.


    Advance thanks.

  6. #6
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    43
    Vote Rating
    0
    sailei1 is on a distinguished road

      0  

    Default


    I used version is 2.0.1
    Chinese