`
sailei1
  • 浏览: 127311 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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) {
		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: ''
	}
});


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



如果对你有帮助 可以捐助我呀!大老板们 
3
1
分享到:
评论
3 楼 MIMIko 2016-03-25  
怎么显示少了一个文件呢?跑步起来
2 楼 zengdingshan 2013-10-23  
请回复zdsxsc@163.com
1 楼 zengdingshan 2013-10-23  
你好,这个demo运行不起来,请问有什么特殊配置吗

相关推荐

    touch-docs-2.2.1.zip(senchaTouch 离线API参考文档)

    2. **示例代码**:包含许多实际应用的例子,展示了如何在项目中使用Sencha Touch的各种功能。 3. **快速入门指南**:针对初学者的教程,引导他们快速上手Sencha Touch的开发环境和基本操作。 4. **用户手册**:...

    Sencha Touch2环境搭建

    Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...

    sencha touch 2 实例

    sencha touch 2 实现的贪吃蛇 希望对大家有所帮助

    Sencha Touch2 MVC Demo (含源码/数据库)

    Sencha Touch 2 是一个流行的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理,使得开发者可以创建与原生应用类似的交互体验。MVC(Model-View-Controller)架构模式...

    api.zip_sencha _sencha touch api_sencha touch2 api

    标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...

    Sencha 和 Sencha Touch 简介

    本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...

    sencha touch 登陆界面

    Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...

    Sencha Touch in Action

    2. 开发环境搭建:指导读者如何搭建Sencha Touch的开发环境,包括下载和安装Sencha Touch库。 3. 用户界面组件:详细介绍Sencha Touch提供的各种用户界面组件,如按钮、列表、表单、滑动菜单等。 4. 应用结构与生命...

    sencha touch项目源码

    2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...

    Sencha Touch开发的项目《般若人生》源码

    《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...

    一个完整的sencha touch 应用案例

    2. **sencha-touch-all.js**:这是Sencha Touch的完整构建,包含所有组件和功能。在开发阶段,为了方便调试,我们通常使用此文件;但在生产环境中,为了优化性能,我们会使用按需加载的精简版(如sencha-touch.js)...

    sencha touch2 ajax 获取数据

    在探讨“Sencha Touch2 AJAX获取数据”的主题时,我们首先需要理解Sencha Touch2框架的基本概念以及AJAX技术在其中的应用。Sencha Touch2是一个用于构建高性能、跨平台的移动应用的JavaScript库,它专注于触摸设备上...

    sencha touch list demo

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...

    sencha touch 2.4.0最新版

    Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...

    sencha touch在VScode上的插件

    2. **语法高亮**:对Sencha Touch的JavaScript语法进行特殊标记,使代码更易读。 3. **模板和snippet**:预设Sencha Touch常用代码片段,快速构建组件。 4. **调试支持**:可能包含Sencha Touch应用的调试工具,帮助...

    sencha touch中文翻译文档

    这个"Sencha Touch中文翻译文档"是针对Sencha Touch 2(ST2)的详细教程和指南,旨在帮助中国开发者更轻松地理解和运用这一框架。 在入门基础部分,文档可能涵盖了以下内容: 1. **安装与设置**:如何下载Sencha ...

Global site tag (gtag.js) - Google Analytics