Question

我是Sencha Touch框架的新手，想要从Sencha Touch 2.0开始，但却找不到任何显示使用MVC Pattern构建的应用程序的教程，特别是在Sencha Touch 2.0版本中。

Answer 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命名空间下定义所有未来的类。

然后您定义了两个主要配置文件。平板电脑和手机。它们告诉您的应用如何在不同环境中表现。在这里指定尽可能多（或没有）。

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

让我们继续使用平板电脑资料

应用程序/简档/ 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');
    }
});

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

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

是更正确的方法

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

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

请注意，Ext.Viewport是Ext.Container的一个实例，已在app start上添加到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的TitleBar。

您是否注意到我们刚刚定义了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]意味着找到我的xtype =按钮cmp，其中包含property action = coolBtn）。 Refs也添加了getter方法，如onCoolButtonTap示例中所示。

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

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

摘要

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

请注意，我已经写好了，并没有测试过。如果你发现了拼写错误，请告诉我。

Answer 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

Answer 3

确保您使用Beta1 realease，因为它具有最新的示例集。如果您看一下jog-with-friends示例，您可以看到类系统的工作原理。

首先要了解的是应用程序结构，它包含控制器，模型，存储和视图以及它们在Ext.Application中的定义......

他们仍在研究文档和教程很少，我只是看着示例应用程序学习了新的类系统，看看它可能有助于让你进行中

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

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

Sencha Touch 2.0 MVC教程

3 个答案: