从零开始学习Sencha Touch MVC应用之二

最新推荐文章于 2024-11-18 16:10:33 发布

xfwgq

最新推荐文章于 2024-11-18 16:10:33 发布

阅读量1.1k

点赞数

分类专栏： Sencha Touch 文章标签： mvc safari namespaces chrome stylesheet google

Sencha Touch 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

现在开始最有趣的部分-编码：
首先，我们需要在index.html中增加如下内容：
<!DOCTYPE html>
<html>
<head>
<title>MvcTouch</title>


<link rel="stylesheet" type="text/css" href="lib/sencha-touch-1.1.0/sencha-touch.css" />
< type="text/java" src="lib/sencha-touch-1.1.0/sencha-touch.js"></>

< type="text/java" src="/app/app.js"></>

</head>
<body></body>
</html>
这步很简单，我们仅仅增加了Sencha Touch所需的文件（包括js文件和css文件），同时也包括我们自己建立的app.js文件。
接着让我们来写些javascrpt代码：
打开app.js，让我们来添加如下内容。
Ext.regApplication({
name: 'App',
launch: ()
{
alert("Yay, it's working!");
}
});
太好了，但这些code能做什么？！好，它们创建了我们应用。
我们通过传递被我们命名的应用的配置对象来调用Ext.regApplication功能（ext是Sencha touch使用的命名空间），并且功能的执行是在所有的东西都被加载完后，应用可以完成它所该完成的职责，这里我们只添加了消息提示框的功能，来验证是否程序加载运行正常。
请注意，应用名称是非常重要的，因为在我们的命名空间上，将要附加我们常用的视图、控制器等，下面就是sencha touch文档中一段节选。
“Instantiating a new application automatically creates a global variable using the configured name property and sets up namespaces for views, stores, models and controllers within the app.”
//this code is run internally automatically when creating the app
Ext.ns('MyApp', 'MyApp.views', 'MyApp.stores', 'MyApp.models', 'MyApp.controllers');

所以，在我们的后续例子代码中，将要有像App.views.HomeMainView.等类似东西出现。
好，那么为何我们的项目工程名称是App而不是MvcTouch？
App更简短并且因为一贯性是名称更有意义，如果我们命名像MvcTouch这样的工程名称，我们就必须也会有MvcTouch.views.HomeMainView等类似的名称，再以后，当我们需要写另外的App，你将不得不像工程名称一样再命名另外的应用实例，如：AnotherApp.views.HomeView.无论如何，如果我们在我们的项目中总是用App命名应用实例，我们将发现实行变得更快；视图将总是以App.views.*,控制器总是以App.controllers.*等面貌出现。
现在，我们用Safari 或Google Chrome打开index.html ，看提示的消息框是否出现。
为什么是Safari 或Google Chrome，而不是Firefox？
Sencha touch的作用是建立在移动设备上建立web apps应用，而不是桌面的浏览器。至于Safari 或Google Chrome为何能够处理Sencha Touch app应用的原因，是因为这些浏览器是像其他移动设备上的浏览器一样建立在webkit的引擎基础上。