JavaScript开发之路01(初识Sencha Touch框架)

时间:2023-07-17 16:41:44

一.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',
width:'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);
}
}
});