cou*_*011 13 sencha-touch sencha-touch-2
我是Sencha Touch框架的新手,想要从Sencha Touch 2.0开始,但无法找到任何教程,显示使用MVC Pattern构建的应用程序,特别是在Sencha Touch 2.0版本中.
Grg*_*gur 43
这可能是最早的教程之一,所以请耐心等待,并知道最终版本可能会发生变化.
对于MVC,您首先要设置文件夹结构.像这样的东西:
MyApp
app
controller
model
profile
store
view
touch2
app.js
index.html
现在,让我们从一个示例应用程序开始.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sample App</title>
<link rel="stylesheet" href="touch2/resources/css/sencha-touch.css" type="text/css" title="senchatouch" id="senchatouch" />
<link rel="stylesheet" href="touch2/resources/css/android.css" type="text/css" title="android" id="android" disabled="true" />
<link rel="stylesheet" href="touch2/resources/css/apple.css" type="text/css" title="apple" id="apple" disabled="true" />
<link rel="stylesheet" href="touch2/resources/css/bb6.css" type="text/css" title="blackberry" id="blackberry" disabled="true" />
<link rel="stylesheet" href="styles/main.css" type="text/css">
<script type="text/javascript" src="touch2/sencha-touch-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Ext.Loader.setConfig({
enabled : true
});
Ext.application({
name: 'MyApp',
profiles: ['Tablet'],
views: [
// common Tablet & Phone views
],
models: [
],
controllers: [
'Main'
],
launch:function(){
Ext.Viewport.add(Ext.create('MyApp.view.Main'));
//Ext.Viewport.add(Ext.create('MyApp.view.tablet.Main'));
}
});
好的,现在你有两个关键文件,Ext.Loader将根据需要获取框架组件,以便于调试.
首先,设置应用程序的命名空间(MyApp).这意味着将在MyApp命名空间下定义所有未来的类.
然后,您已定义了两个主要配置文件.平板电脑和手机.它们告诉您的应用如何在不同环境中表现.在此指定尽可能多(或无).
接下来,您已设置在两个配置文件之间共享的视图,模型和控制器.他们不关心您是在手机还是平板电脑上使用该应用程序.
让我们继续我们的平板电脑配置文件
Ext.define('MyApp.profile.Tablet', {
extend: 'Ext.app.Profile',
config: {
views: [
'Main'
]
},
isActive: function() {
return !Ext.os.is('Phone');
},
launch: function() {
Ext.create('MyApp.view.tablet.Main');
}
});
非常不言自明.Config对象保存特定于配置文件的视图/模型/控制器.如果您在智能手机上运行应用程序,则不会使用它们(包括在内).
isActive方法在评估环境后需要返回true或false.我特意说平板电脑都是非手机.从逻辑上讲这是不正确的,但为了简单起见,我决定采用这种方式.更正确的方法是
return Ext.os.is('Tablet') || Ext.os.is('Desktop');
配置文件的最后一位是启动方法.它告诉应用程序在特定配置文件中启动应用程序时该怎么做.MyApp将在Ext.Viewport中创建主视图.
请注意,Ext.Viewport是Ext.Container的一个实例,已在app start上添加到DOM.
让我们创建我们的第一个视图.它可以是你想要的任何小部件,我选择了NavigationView.
Ext.define('MyApp.view.Main', {
extend: 'Ext.navigation.View',
config: {
fullscreen : true,
items: [
{
title: 'My Great App'
}
]
}
});
它是全屏(100%宽度和高度),它立即创建一个标题为My Great App的TitleBar.
您是否注意到我们刚刚定义了MyApp.view.Main,但应用程序会期望MyApp.view.tablet.Main？正是因为我想展示如何在配置文件之间重用视图.它只有在我们根据配置文件改变它们的位时才有用.
Ext.define('MyApp.view.tablet.Main', {
extend: 'MyApp.view.Main',
initialize: function() {
this.add({
xtype : 'button',
action : 'coolBtn',
text : 'Running on a tablet'
});
this.callParent();
}
});
这看起来很棒.只是为了扩展我向NavigationView添加了额外的按钮.我要设置一个可以使用按钮的控制器
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
coolButton: 'button[action=coolBtn]'
},
control: {
coolButton: {
tap: 'onCoolButtonTap'
}
},
routes: {
'show/:id' : 'showItem'
}
},
onCoolButtonTap: function(button) {
console.log(button === this.getCoolButton());
},
showItem: function(id) {
console.log('Showing item',id);
}
});
这是很棒的部分,就在这里.Refs使我们可以基于组件查询规则快速访问组件(button [action = coolBtn]意味着找到我的xtype =按钮cmp,其中包含property action = coolBtn).Refs也添加了getter方法,如onCoolButtonTap示例中所示.
然后我控制按钮并告诉应用程序监视点击事件并为其分配处理程序.
MVC模式的另一个明智之处是路由.它们将检测URI路径中的"命令",例如http://localhost/#show/7482,通过提供的showItem处理程序执行它们.
我认为现在您已经了解了如何从MVC应用程序入手.有了一些好奇心,您可以扩展知识并创建出色的应用程序.
请注意,我已经写了这篇文章并没有经过测试.如果你发现了拼写错误,请告诉我.
ili*_*139 12
以下是sencha 2011会议的两个视频:
SenchaCon 2011:MVC深度第1部分 https://vimeo.com/33311074
和
SenchaCon 2011:MVC深度第2部分 https://vimeo.com/33430731
您也可以查看他们的博客以获取其他简短的教程.
另一个更好地了解Sencha Touch 2的视频
SenchaCon 2011:Sencha类系统 https://vimeo.com/33437222
| 归档时间： |
|
| 查看次数： |
25452 次 |
| 最近记录： |