13

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

4

3 回答 3

43

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

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

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

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

索引.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>

应用程序.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 命名空间下定义。

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

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

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

应用程序/配置文件/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。

应用程序/视图/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？正是因为我想展示如何在配置文件之间重用视图。仅当我们根据配置文件更改它们的位时才有用。

应用程序/视图/平板电脑/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 中添加了额外的按钮。我将设置一个可以与按钮一起使用的控制器

应用程序/控制器/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 应用程序有了基本的了解。带着一些好奇心，您可以扩展知识并创建出色的应用程序。

请注意，我已经把这个写出来了，还没有测试过。如果您发现错字或其他内容，请告诉我。

于 2012-02-12T07:44:37.917 回答
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

于 2012-02-10T15:17:36.820 回答
2

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

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

他们仍在编写文档并且教程很少，我仅通过查看示例应用程序就了解了新的课程系统，看看它可能有助于您开始

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

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

于 2012-02-10T15:28:50.950 回答