sencha touch项目中经验总结

1.问题：在Ext.navigation.View中,当切换前面出现空白

环境

在sencha-touch-2.0.1.1系统中,在任何设备上;

 

现象及分析

页面切换（push方法）到另一个页面，此时页面切换（pop方法）到原来页面,再次页面切换（push方法）到之前页面，此时页面没有展示任何内容。

分析：1.在模拟器中，跟踪代码执行，并没有发生异常或错误，并不是程序逻辑问题；

      2.进一步分析，可能是sencha-touch框架存在问题。

 

解决方法

页面中有field组件中name="id"，所导致Ext.navigationview.View的push不起作用，把name的不命名为”id”，问题解决。

 

2.问题：填写表单时，按下软键盘中“前往”键，跳转到空白页面

环境

设备：android，手机品牌：三星i9070 2.3.6系统，ST2版本：2.0.1.1

 

现象及分析

填写表单时，弹起软键盘，并输入数据完毕后，按下“前往”键，则跳转到空白页面，并不可以进行任何操作，锁死此页面中。

分析：1.写了一个简单表单页面代码，按下“前往”键，结果没有跳转到空白页面，且键盘收回，其他操作正常；

2.根据第一条分析，可能卡单销售填写保单程序中，可能有些代码导致或触发“前往”键跳转到任何页面；

3.监听“前往”键，阻止此键触发系统默认跳转，测试结果是没有效果，依然跳转到空白页面，可能不是此原因触发而导致；

解决方法

解决办法原则是排除法，把表单页面中所有方法去掉，测试按“前往”键，结果没有跳转到空白页面，进一步添加了initialize方法（表单初始化方法，继承Ext.form.Panel的实体），发现出现跳转空白页面，判定问题就出现在这个initialize方法中，这个方法主要现实是监听本页面滚动条事件，当滚动条移动时，隐藏错误提示框。根据以上分析，在android2系统中，sencha-touch中自定义类继承Ext.form.Panel并没有完全调用父类所有方法，所以initialize方法中添加this.callParent();语句，来解决此问题。

 

3.问题：页面切换时，页面标题栏出现白边状闪烁

环境

设备：IOS，手机品牌：iphone/ipod，ST2版本：2.0.1.1

 

现象及分析

页面切换时，页面的标题栏上出现白边状闪烁。

分析：1.主流程页面中嵌套了子系统编辑保单页面，主体和子系统页面切换，主要用了Ext.navigation.View的push/pop方法，可能同时嵌套navigation组件导致了这种现象。

 

解决方法

根据以上分析，测试了主体、子系统继承Ext.Container，结果没有出现闪烁；第二测试时主体系统继承Ext.Container，子系统继承Ext.navigation.View进行页面切换，结果出现闪烁；第三测试主体继承Ext.navigation.View，子系统继承Ext.Container进行页面切换，结果没有出现闪烁。

综合以上，可得出card布局中嵌套Ext.navigation.View在IOS上会出现白边状闪烁，解决办法是子系统继承改为Ext.Container。

 

 

4.问题：若键盘弹起状态，点击跳转页面A时，页面A呈现空白

环境

设备：IOS，手机品牌：iphone/ipod，ST2版本：2.0.1.1

 

现象及分析

表单输入框填写数据，键盘弹起时，同时点击跳转页面按钮（此时，键盘有收回动作），则跳转到的新页面呈现空白状态。相反，在键盘弹起，并且点击跳转页面按钮之前时，把键盘收回后跳转页面，则页面没有呈现空白状况。

分析：反复测试以上情况，100%出现空白的页面。

 

解决方法

根据以上分析，可得原因是键盘没有收回，导致页面出现空白情况。处理方法是当点击跳转页面时候，将此输入框失去焦点，则触发键盘收回，然后跳转页面。

 

5.问题：页面拖动不了

环境

设备：android，手机品牌：华为C8812E4.0系统，ST2版本：2.0.1.1

 

现象及分析

上下拖动页面时，页面缓慢和卡顿现象。

分析：1.此设备不是很好支持CSS3样式，如transform变换等；

2.卡单销售中，主要在滚动条、页面切换运用了大量transform样式，还有程序上循环语句，都有可能导致页面卡顿现象。

 

解决方法

在sencha-touch.css文件中，1.注释掉大部分transform样式；2.把页面切面效果改为渐变（此效果没有运用transform样式）；3.针对程序上循环语句中，把for in 语句替换成sencha-touch内置Ext.Object.each()语句，常用的对象某个属性，赋予一个变量中，在循环语句中，即可快速地调用此变量，以减少遍历对象的属性。

 

 

6.问题：<label>标签使用

环境

设备：android/IOS，ST2版本：2.0.1.1

 

现象及分析

<input type="checkbox" id="pr_input_checkRules_id" />

<label for="pr_input_checkRules_id" </label>

 

以上代码中，在android设备正常显示和操作，但是在IOS设备上无法显示和操作。

 

解决方法

将两个标签顺序替换执行，IOS正常显示与操作。

 

 

7.问题：页面切换速度与稳定性

环境

设备：android/IOS，ST2版本：2.0.1.1

 

现象及分析

在页面切换方法中，sencha-touch框架有2大类切换方法。

1是使用Ext.navigation.View类中的push()、pop()方法进行页面切换，此优势是页面切换效果配置（动画、切换时间）可以省略，而且不用关心返回具体页面。

2是使用card布局中的setActiveItem()方法，同时还可以使用animateActiveItem()方法灵活控制切换动画效果和时间等配置，但是每次页面切换，都要知道具体跳转页面。

分析：使用了push()、pop()方法，可是页面切换频繁和加载大量数据，导致页面切换速度更加缓慢，而且出现页面短暂空白或要用手划动才出现页面。

 

解决方法

相比较2中，如果要求页面切换速度快和稳定展示页面，则使用animateActiveItem()方法，可以有效控制跳转时间和提高稳定性。