1. #1
    Sencha User sailei1's Avatar
    Join Date
    Jul 2011
    Location
    BeiJing China
    Posts
    42
    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
    36,754
    Vote Rating
    828
    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
    393
    Vote Rating
    16
    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
    42
    Vote Rating
    0
    sailei1 is on a distinguished road

      0  

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Posts
    41
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi