Sencha Touch 2 Menu

主页面

/** * @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) {varmenuButton = 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 menuthis.openMenu(menuButton);} else {// close Menuthis.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);varitems = 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);    varitems = 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);   varitems = 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: ''}});

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