在st2.1之中,在NavigationView视图之中在嵌套一个TabPanel会有以下问题 下面我们监控TabPanel的activate事件和activeitemchange事件 会发现当首页加载时会触发activate事件,进入到TabPanel后不会触发以上两个事件. 但是点返回并且销毁TabPanel时会触发activeitemchange事件. activeitemchange(this, value, oldValue, eOpts) 并且会发现value值为空 所以在这种情况下…

NavigationView 是官方根据Container控件扩展而来的,由一个导航栏和一个card组成,具备导航和返回时自动销毁当前界面的功能,非常适合新手使用. 其中导航栏的代码如下: Ext.define('Ext.navigation.Bar', { extend: 'Ext.TitleBar', requires: ['Ext.Button', 'Ext.Spacer'], isToolbar: true, config: { baseCls: Ext.baseCSSPrefix +…

Ext.define('Ext.navigation.View', { extend: 'Ext.Container', alternateClassName: 'Ext.NavigationView', xtype: 'navigationview', requires: ['Ext.navigation.Bar'], config: { /** * @cfg * @inheritdoc */ baseCls: Ext.baseCSSPrefix + 'navigationview', /**…

常规的Sencha touch 应用都是"header content footer"结构,这样的结构无疑将使用TabPanel来实现,而且TabPanel肯定是card布局,这样就会如果要实现"view"之间的跳转,animateActiveItem()方法将被使用, 但是通过st的源码 animateActiveItem: function(activeItem, animation) { var layout = this.getLayout(), defau…

笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用tabpanel来实现. 但是在sencha touch的开发使用过程中,我们总是会碰到不给高度就不显示的问题,非常之恼火,浪费我大把时间研究 笔者在开发这个需求的时候也碰到了,下来就分享一下方案吧: 1,先来看看有问题的方案,以下是代码: Ext.define("mine.view.ListFrie…

基于sencha touch 2.2所写 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', { alternateClassName: 'tabBar', extend: 'Ext.Toolbar', xtype: 'tabBar', config: { docked: 'bottom', cls: 'navToolbar', layout: { align: 'stretch' }, defaults: { flex: 1 }, //被选中的按钮…

这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下 基于sencha touch 2.2所写 效果图: 代码: /* *模仿tabpanel导航栏 */ Ext.define('ux.TabBar', {     alternateClassName: 'tabBar',     extend: 'Ext.Toolbar',     xtype: 'tabBar',     config: {         docked: 'bo…

1.目录 移动框架简介,为什么选择Sencha Touch? 环境搭建 创建项目框架,框架文件简介 创建简单Tabpanel案例 自定义图标的方式 WebApp产品测试和发布 HTML5离线缓存 发布成Android/IOS本地app应用 移动框架简介,为什么选择Sencha Touch? 目前市面上,移动应用web框架,也算是风生水起,不断涌现,各个都称自己最牛逼.常见的几个框架主要有jquery Mobile,Dojo Moble,Sencha Touch,我这里是极端推荐Sencha To…

Sencha Touch 2的有效xtype xtype Class ----------------- --------------------- actionsheet Ext.ActionSheet audio Ext.Audio button Ext.Button component Ext.Component container Ext.Container image Ext.Img label Ext.Label loadmask Ext.LoadMask map Ext.Map m…

大家知道,sencha touch是通过我们写的js代码来动态渲染单页面生成一个个div+css的html页面来模拟app应用,那么既然是div+css结构的,我们就可以通过修改css样式来自定义我们app的主题跟样式. 在sencha touch中,已经默认提供了一些主题样式,我们可以在下载的sencha touch sdk路径下的touch-building/resources/css和touch-building/resources/css-debug文件夹下找到这些样式文件,css文件夹…