- 浏览: 127018 次
- 性别:
- 来自: 北京
最新评论
-
MIMIko:
怎么显示少了一个文件呢?跑步起来
Sencha Touch 2 Menu -
daydayupx:
有完整的代码吗?1240500584@qq.com
Sencha Touch Carousel -
JAVA一小菜:
您好,我想问下,为什么我从官网下载下来的sencha touc ...
Sencha Tuch Spket1.6.23 IDE 配置 -
zengdingshan:
请回复zdsxsc@163.com
Sencha Touch 2 Menu -
zengdingshan:
你好,这个demo运行不起来,请问有什么特殊配置吗
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); }
如果对你有帮助 可以捐助我呀!大老板们
- _Menu_demo.zip (2.4 MB)
- 下载次数: 197
评论
3 楼
MIMIko
2016-03-25
怎么显示少了一个文件呢?跑步起来
2 楼
zengdingshan
2013-10-23
请回复zdsxsc@163.com
1 楼
zengdingshan
2013-10-23
你好,这个demo运行不起来,请问有什么特殊配置吗
发表评论
-
Sencha Touch chart 时间轴
2013-06-28 17:33 1894JSon 时间数据格式 {"data" ... -
Sencha Touch 复杂 store
2013-06-25 11:26 2767Ext.define('Contact.model.Titl ... -
gird 翻页
2013-05-15 14:57 1595//<debug> Ext.Loader ... -
Sencha Touch TextArea 支持滑动
2013-04-12 16:41 3533TextArea ios 支持滑动 Ext.def ... -
Sencha Touch history 理解
2013-02-20 14:20 1255/** * @author Ed Spencer ... -
Sencha Touch history
2013-02-20 14:19 1736/** * @author Ed Spencer ... -
Sencha Touch Carousel 自动切换
2013-01-25 11:20 1671setInterval(function () { ... -
Sencha Touch userAgent 判断
2013-01-25 11:05 1255[{ name: 'en ... -
Sencha Touch Ajax CORS 跨域
2013-01-21 11:28 4724CORS 全称:Cross-Origin Resource ... -
Sencha Touch Carousel
2012-12-26 14:37 1371var el = carousel.element; ... -
Sencha Touch 判断横竖屏
2012-12-26 14:27 1455Ext.Viewport.on('orientat ... -
Sencha Touch 2 第二讲
2012-11-13 09:25 1256第二讲(Sencha Touch 应用组成部分及简单介绍) h ... -
Sencha Touch 2 第一讲
2012-11-06 11:51 2106教学视频 下载地址 http://www.kuaipan.cn ... -
Sencha Touch 2 Jsonp原理
2012-10-27 22:51 4335JSONP是一个非官方的协议,它允许在服务器端集成Script ... -
ST谷歌语音搜索
2012-09-05 09:57 1065var dom= me.element.down(' ... -
picker 加title
2012-08-21 16:06 1099var picker = Ext.create('Ex ... -
Sencha Touch 自定义图标
2012-08-13 17:37 5774首先把你 图标图片放入 E:\space\Theming\sd ... -
Sencha Touch 2 Slidenavigation
2012-08-07 14:57 1639launch: function() { var ... -
phonegap SQLite 插件
2012-08-02 15:33 7253插件下载地址: https://github.com/Appl ... -
XTemplate 使用
2012-07-23 18:05 0itemTpl: new Ext.XTemplate( ...
相关推荐
2. **示例代码**:包含许多实际应用的例子,展示了如何在项目中使用Sencha Touch的各种功能。 3. **快速入门指南**:针对初学者的教程,引导他们快速上手Sencha Touch的开发环境和基本操作。 4. **用户手册**:...
Sencha Touch 2是一款专为移动设备开发的前端框架,用于构建高性能的触控应用程序。它提供了丰富的组件库,使得开发者能够轻松创建出与原生应用相似的用户体验。本篇文章将详细阐述如何搭建Sencha Touch 2的开发环境...
sencha touch 2 实现的贪吃蛇 希望对大家有所帮助
Sencha Touch 2 是一个流行的JavaScript框架,专为构建移动Web应用程序而设计。它提供了丰富的UI组件、数据管理和触摸事件处理,使得开发者可以创建与原生应用类似的交互体验。MVC(Model-View-Controller)架构模式...
标题中的"api.zip_sencha _sencha touch api_sencha touch2 api"表明这是一个关于Sencha Touch API的压缩文件集合,可能包含了Sencha Touch和Sencha Touch 2两个版本的API文档。 **Sencha Touch基础知识** Sencha ...
本文通过对 Sencha Touch 框架的介绍,使读者对该框架有一定的了解,并通过一些代码示例给用户更详细直观的对 Sencha Touch 框架功能的了解。 ExtJS ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速...
Sencha Touch 是一款专为移动设备设计的JavaScript框架,它提供了丰富的组件库和强大的数据管理功能,用于构建高性能的触控应用。"sencha touch 登陆界面"这个主题,主要涉及的是如何使用Sencha Touch来设计和实现一...
2. 开发环境搭建:指导读者如何搭建Sencha Touch的开发环境,包括下载和安装Sencha Touch库。 3. 用户界面组件:详细介绍Sencha Touch提供的各种用户界面组件,如按钮、列表、表单、滑动菜单等。 4. 应用结构与生命...
2. **模型(Model)与存储(Store)**:Sencha Touch使用MVC(Model-View-Controller)架构。模型用于定义数据结构和业务逻辑,而存储则负责管理数据,包括加载、保存和同步到服务器。 3. **视图(View)与控制器...
《般若人生》是一款基于Sencha Touch框架开发的移动应用项目。Sencha Touch是一个流行的JavaScript框架,专门用于构建跨平台的触屏友好型Web应用程序。它提供了丰富的UI组件和强大的数据管理工具,使得开发者能够...
2. **sencha-touch-all.js**:这是Sencha Touch的完整构建,包含所有组件和功能。在开发阶段,为了方便调试,我们通常使用此文件;但在生产环境中,为了优化性能,我们会使用按需加载的精简版(如sencha-touch.js)...
在探讨“Sencha Touch2 AJAX获取数据”的主题时,我们首先需要理解Sencha Touch2框架的基本概念以及AJAX技术在其中的应用。Sencha Touch2是一个用于构建高性能、跨平台的移动应用的JavaScript库,它专注于触摸设备上...
Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件库,用于构建高性能的触屏Web应用。在“sencha touch list demo”中,我们主要关注的是Sencha Touch中的列表(List)组件,这是一个核心且常用的...
Sencha Touch 2.4.0 是一个专为移动设备设计的前端JavaScript框架,它使得开发者能够构建功能丰富的、响应式的Web应用程序,这些应用在智能手机、平板电脑等移动设备上表现得如同原生应用一样流畅。这个框架由Sencha...
2. **语法高亮**:对Sencha Touch的JavaScript语法进行特殊标记,使代码更易读。 3. **模板和snippet**:预设Sencha Touch常用代码片段,快速构建组件。 4. **调试支持**:可能包含Sencha Touch应用的调试工具,帮助...
这个"Sencha Touch中文翻译文档"是针对Sencha Touch 2(ST2)的详细教程和指南,旨在帮助中国开发者更轻松地理解和运用这一框架。 在入门基础部分,文档可能涵盖了以下内容: 1. **安装与设置**:如何下载Sencha ...