JavaScript开发之路01（初识Sencha Touch框架）

一.SenchaTouch的hello world实例：

Ext.application({
name:'myapp',
icon:'images/icon.png',
glossOnIcon:false,
phoneStartupScreen:'images/phone_startup.png',
tabletStartupScreen:'images/tablet_startup.png',
launch:function(){
var panel=Ext.create('Ext.Panel',{
fullscreen:true,
id:'mypanel',
'100%',
style:'color:red',
html:'hello sencha touch-2.4.2!'
});
Ext.Viewport.add(panel);
}
});

二.SenchaTouch中的动态加载技术：
1.同步加载：
优势：可以不必指定应用程序中使用哪些类；
缺点：①不利于调试；②由于XHR的限制，不能实现跨域获取数据；③调式应用程序时必须使用Web服务器
注意：在使用同步加载技术的时候，不能使用sencha-touch-debug.js或者sencha-touch.js脚本文件，而必须使用sencha-touch-all-debug.js或者sencha-touch-
all.js脚本文件。

2.异步加载：
优势：①可以实现跨域获取数据的功能；②调试时不需要Web服务器，可以通过文件系统协议（例如：file：//path/to/your/index.html）直接调试磁盘中的某个文
件；
缺点：必须手动指定应用程序中所要使用的类；
注意：使用异步加载时，需要通过Ext.require（）方法来指定应用程序中所需使用的类，具体操作如下：
①指定单个类：Ext.require（‘Ext.Img’）；
②使用通配符指定某个包中所有类：Ext.require（‘Ext.data.*’）；
③使用通配符指定所有类：Ext.require（‘*’）；
④通过数组进行多重指定：Ext.require（[‘Ext.Img’，‘Ext.Panel’]）；
⑤指定使用除了data包中的类之外的所有类：Ext.exclude（‘Ext.data.*’）.require（‘*’）；
⑥指定使用data包中除了TreeStore类之外的所有类：Ext.exclude（‘Ext.data.TreeStore’）.require(‘Ext.data.*’)；

三.SenchaTouch在新版谷歌浏览器中painted事件无法触发以及carousel控件，togglefield控件，滚动条失效等问题的解决办法：

在我们的app.js文件中加入以下脚本：
Ext.override(Ext.util.SizeMonitor, {
constructor: function (config) {
var namespace = Ext.util.sizemonitor;

if (Ext.browser.is.Firefox) {
return new namespace.OverflowChange(config);
} else if (Ext.browser.is.WebKit) {
if (!Ext.browser.is.Silk && Ext.browser.engineVersion.gtEq('535') && !Ext.browser.engineVersion.ltEq('537.36')) {
return new namespace.OverflowChange(config);
} else {
return new namespace.Scroll(config);
}
} else if (Ext.browser.is.IE11) {
return new namespace.Scroll(config);
} else {
return new namespace.Scroll(config);
}
}
});
Ext.override(Ext.util.PaintMonitor, {
constructor: function (config) {
if (Ext.browser.is.Firefox || (Ext.browser.is.WebKit && Ext.browser.engineVersion.gtEq('536') && !Ext.browser.engineVersion.ltEq
('537.36') && !Ext.os.is.Blackberry)) {
return new Ext.util.paintmonitor.OverflowChange(config);
}
else {
return new Ext.util.paintmonitor.CssAnimation(config);
}
}
});