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

      1  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,582
    Vote Rating
    1136
    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 Software Engineer
    ________________
    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
    459
    Vote Rating
    22
    digeridoo will become famous soon enough digeridoo will become famous soon enough

      0  

    Default 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
    1
    sailei1 is on a distinguished road

      0  

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

      0  

    Default 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
    1
    sailei1 is on a distinguished road

      0  

    Default

    I used version is 2.0.1
    Chinese

  7. #7
    Sencha User
    Join Date
    Aug 2014
    Posts
    6
    Vote Rating
    0
    djougue is on a distinguished road

      0  

    Default

    Quote Originally Posted by sailei1 View Post
    Attachment 41465
    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);}
    Thank. But what i would like to do isn't the round menu visible at the bouton of the menu but it is the menu having the 4 icons image (Market icon,Notification.... . Please can you that related menu code to me. I would like to design a menu exactly like that. Also i would like to badge the text into the notification icon as you did can you help me to?
    can you send me by email (djouguae@yahoo.fr) the whole code of that Page, it will be very useful for me ?