Sencha Touch 2.0 MVC 教程 [关闭]答案

【问题标题】：Sencha Touch 2.0 MVC tutorial [closed]Sencha Touch 2.0 MVC 教程 [关闭]
【发布时间】：2012-03-03 01:03:58
【问题描述】：

我对 Sencha Touch 框架非常陌生，想从 Sencha Touch 2.0 开始，但找不到任何教程展示使用 MVC 模式构建的应用程序，特别是在 Sencha Touch 2.0 版中。

【问题讨论】：

I need help finding a solid tutorial for Sencha Touch V2 的可能重复项

标签： sencha-touch sencha-touch-2

【解决方案1】：

这可能是最早的教程之一，因此请耐心等待，并知道在最终版本出现时情况可能会发生变化。

对于 MVC，您需要先设置文件夹结构。像这样的：

MyApp
    app
      controller
      model
      profile
      store
      view
    touch2
    app.js
    index.html

现在，让我们从一个示例应用开始。

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>

app.js

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 命名空间下定义。

然后您已经定义了两个主要配置文件。平板电脑和手机。它们告诉您的应用程序如何在不同的环境中运行。在此处指定尽可能多（或不指定）。

接下来，您已设置在两个配置文件之间共享的视图、模型和控制器。他们不在乎您是在手机还是平板电脑上使用该应用程序。

让我们继续我们的平板电脑配置文件

app/profile/Tablet.js

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');
    }
});

相当不言自明。配置对象包含特定于配置文件的视图/模型/控制器。如果您在智能手机上运行应用程序，它们将不会被使用（包括在内）。

isActive 方法需要在评估环境后返回 true 或 false。我特别说平板电脑都是非手机。从逻辑上讲这是不正确的，但为了简单起见，我决定这样玩。更正确的方法是

return Ext.os.is('Tablet') || Ext.os.is('Desktop');

配置文件的最后一点是启动方法。它告诉应用程序在特定配置文件中启动应用程序时要做什么。 MyApp 将在 Ext.Viewport 中创建主视图。

请注意，Ext.Viewport 是 Ext.Container 的一个实例，它已在应用启动时添加到 DOM。

让我们创建我们的第一个视图。它可以是你想要的任何小部件，我选择了 NavigationView。

app/views/Main.js

Ext.define('MyApp.view.Main', {
    extend: 'Ext.navigation.View',

    config: {
        fullscreen  : true,

        items: [
            {
                title: 'My Great App'
            }
        ]

    }
});

它是全屏的（100% 宽度和高度），它会立即创建一个标题栏，标题为 My Great App。

您是否注意到我们刚刚定义了 MyApp.view.Main，但应用程序会期望 MyApp.view.tablet.Main？正是因为我想展示如何在配置文件之间重用视图。仅当我们根据配置文件更改它们的位时才有用。

app/views/tablet/Main.js

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 中添加了额外的按钮。我要设置一个可以使用按钮的控制器

app/controller/Main.js

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] 意味着找到我的 a xtype = button cmp，它具有属性 action = coolBtn）。 Refs 也添加了 getter 方法，如 onCoolButtonTap 示例所示。

然后我控制按钮并告诉应用程序监视点击事件并为其分配处理程序。

MVC 模式的另一个巧妙补充是路由。他们将在您的 URI 路径中检测“命令”，例如http://localhost/#show/7482 并通过提供的 showItem 处理程序执行它们。

总结

我认为现在您对如何开始使用 MVC 应用程序有了基本的了解。带着一些好奇心，您可以扩展知识并创建出色的应用程序。

请注意，我是在脑海中写出来的，还没有测试过。如果您发现错字或其他内容，请告诉我。

【讨论】：

这只是给了我一个空白屏幕。你能压缩一个示例项目吗？
@Grgur 感谢这个简短的教程。对我帮助很大。

【解决方案2】：

以下是 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

【讨论】：

大声笑，你在说什么？是英文的。。
不是 MVc，而是名为“completely_sencha_touch_2_tutorial_1.introdution_640x360.mp4”的视频听起来不像英文。
是的，我几周前下载了。

【解决方案3】：

确保您使用的是 Beta1 版本，因为它具有最新的示例集。如果您看一下 jog-with-friends 示例，您会了解班级系统的工作原理。

首先要了解的是应用程序结构，它由控制器、模型、存储和视图组成，以及它们是如何在 Ext.Application 内部定义的......

他们仍在编写文档，教程很少，我只是通过查看示例应用程序了解了新的课程系统，看看它可能会帮助你开始

类系统的文档也在这里：http://docs.sencha.com/touch/2-0/#!/guide/class_system

编辑：发布后我看到 Beta2 现已发布

【讨论】：

+1: for '我从示例应用中学到了新的类系统'