在应用程序中使用视图

从用户的角度来看，您的应用程序只是一组视图的集合。尽管应用程序的大部分价值在于模型和控制器，但用户直接与视图交互。在本指南中，我们将了解如何创建构建应用程序的视图。

使用现有组件

创建视图的最简单方法是使用 Ext.create 和现有组件。例如，如果我们想要创建一个简单的 Panel，并在其中包含一些 HTML，我们可以使用以下代码

Ext.create('Ext.Panel', {
    html: 'Welcome to my app',
    fullscreen: true
});

此示例创建一个 Panel，其中包含一些 html 内容，并使其填充屏幕。虽然您可以创建任何内置组件，但最佳实践是创建具有您的特殊化的子类，然后按如下方式实例化该类

Ext.define('MyApp.view.Welcome', {
    extend: 'Ext.Panel',

    config: {
        html: 'Welcome to my app',
        fullscreen: true
    }
});

Ext.create('MyApp.view.Welcome');

结果是相同的，但这次我们有了一个新的组件，我们可以创建任意次数。这是我们在构建应用程序时通常要遵循的模式 - 创建现有组件的子类，然后在以后创建它的实例。让我们看看这些变化

• 我们使用 Ext.define 创建一个新类，通过扩展现有类（在本例中为 Ext.Panel）
• 我们为新的视图类遵循了 MyApp.view.MyView 约定。虽然您可以随意命名它，但我们建议坚持这种命名约定
• 我们在 config 对象内为新类定义了 config

Ext.Panel 上可用的任何配置选项都可以在我们新类的 config 块中指定，或者在我们创建类实例时指定。定义子类时，请确保使用 config 对象；创建时，只需传入一个对象即可。

例如，以下代码基于之前的代码，但在 Ext.create 调用中传入了额外的配置

Ext.define('MyApp.view.Welcome', {
    extend: 'Ext.Panel',

    config: {
        html: 'Welcome to my app',
        fullscreen: true
    }
});

Ext.create('MyApp.view.Welcome', {
    styleHtmlContent: true
});

真实世界示例

以下示例说明了我们的 Twitter 应用程序中的一个 View 类

Ext.define('Twitter.view.SearchBar', {
    extend: 'Ext.Toolbar',
    xtype : 'searchbar',
    requires: ['Ext.field.Search'],

    config: {
        ui: 'searchbar',
        layout: 'vbox',
        cls: 'big',

        items: [
            {
                xtype: 'title',
                title: 'Twitter Search'
            },
            {
                xtype: 'searchfield',
                placeHolder: 'Search...'
            }
        ]
    }
});

此代码示例遵循与之前相同的模式 - 我们创建了一个名为 Twitter.view.SearchBar 的新类，它扩展了框架的 Ext.Toolbar 类。我们还传入了一些配置选项，包括布局和一个 items 数组。

在此示例中，我们使用了以下新选项

• requires - 因为我们在 items 数组中使用了 searchfield，所以我们指示新视图需要 Ext.field.Search 类。目前，动态加载系统无法识别由 xtype 指定的类，因此我们需要手动定义依赖项

• xtype - 为我们的新类提供自己的 xtype，允许我们在配置对象中轻松创建它，这类似于 searchfield 采用的方法

这允许我们以几种方式创建新视图类的实例

//creates a standalone instance
Ext.create('Twitter.view.SearchBar');

//alternatively, use xtype to create our new class inside a Panel
Ext.create('Ext.Panel', {
    html: 'Welcome to my app',

    items: [
        {
            xtype: 'searchbar',
            docked: 'top'
        }
    ]
});

自定义配置和行为

Sencha Touch 广泛使用配置系统来提供可预测的 API 并保持代码的简洁性和易于测试性。我们强烈建议您在自己的类中也这样做。

让我们假设您想要创建一个图像查看器，当您点击图像时，它会弹出有关图像的信息。我们的设计目标是创建一个可重用的视图，可以使用图像 url、其标题和描述进行配置，并在您点击它时显示标题和描述。

大多数围绕显示图像的工作都由 Ext.Img 组件为我们处理，因此我们按如下方式对其进行子类化

Ext.define('MyApp.view.Image', {
    extend: 'Ext.Img',

    config: {
        title: null,
        description: null
    },

    //sets up our tap event listener
    initialize: function() {
        this.callParent(arguments);

        this.element.on('tap', this.onTap, this);
    },

    //this function is called whenever you tap on the image
    onTap: function() {
        Ext.Msg.alert(this.getTitle(), this.getDescription());
    }
});

//creates a full screen tappable image
Ext.create('MyApp.view.Image', {
    title: 'Orion Nebula',
    description: 'The Orion Nebula is rather pretty',

    src: 'http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg',
    fullscreen: true
});

在此示例中，我们为我们的类添加了两个额外的配置 - title 和 description - 它们都以 null 开头。当我们创建新类的实例时，我们像任何其他配置一样传入 title 和 description 配置。

新行为发生在 initialize 和 onTap 函数中。由于每次实例化任何组件时都会调用 initialize 函数，因此它是设置行为（如事件侦听器）的好地方。首先，我们使用 this.callParent(arguments) 以确保调用超类的 initialize 函数。这非常重要，省略此行可能会导致您的组件行为不正确。

在 callParent 之后，我们向组件的元素添加一个 tap 侦听器，每当元素被点击时，它都会调用 onTap 函数。Sencha Touch 中的所有组件都有一个 element 属性，您可以以这种方式使用它来侦听 DOM 对象上的事件，添加或删除样式，或者执行您通常对 Ext.dom.Element 执行的任何其他操作。

onTap 函数本身使用 Ext.Msg.alert 来弹出一些关于图像的信息。请注意，我们的两个新配置 - title 和 description - 都接收生成的 getter 函数（分别为 getTitle 和 getDescription），以及生成的 setter 函数（setTitle 和 setDescription）。

高级配置

当您为类创建新的配置选项时，getter 和 setter 函数会自动为您生成。例如，以下示例中名为 'border' 的配置会自动获得 getBorder 和 setBorder 函数

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 10
    }
});

var view = Ext.create('MyApp.view.MyView');

alert(view.getBorder()); //alerts 10

view.setBorder(15);
alert(view.getBorder()); //now alerts 15

getter 和 setter 不是唯一生成的函数，还有几个函数使组件作者的生活更加简单 - applyBorder 和 updateBorder

Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

每当设置或更改 border 配置时（包括首次实例化组件时），都会在内部调用 applyBorder 函数。这是放置任何转换输入值的代码的最佳位置。在本例中，我们获取传入的边框宽度并返回 CSS 边框规范字符串。

这意味着当我们将视图的 border 配置设置为 10 时，我们的 applyBorder 函数将确保我们将该值转换为 '10px solid red'。apply 函数是可选的，但请注意，您必须从中 返回 一个值，否则什么都不会发生。

updateBorder 函数在 applyBorder 函数转换值后调用，通常用于修改 DOM、发送 AJAX 请求或执行任何其他类型的处理。在我们的例子中，我们获取视图的元素并使用 setStyle 更新边框样式。这意味着每次调用 setBorder 时，DOM 都会立即更新以反映新样式。

以下代码是新视图在操作中的示例。单击代码编辑器按钮以查看源代码 - 基本上我们创建了新视图的实例，并在顶部停靠了一个 spinner，允许我们通过点击 spinner 按钮来更改边框宽度。然后，我们挂钩到 Spinner 的 spin 事件，并从那里调用我们视图的新 setBorder 函数

//as before
Ext.define('MyApp.view.MyView', {
    extend: 'Ext.Panel',

    config: {
        border: 0
    },

    applyBorder: function(value) {
        return value + "px solid red";
    },

    updateBorder: function(newValue, oldValue) {
        this.element.setStyle('border', newValue);
    }
});

//create an instance of MyView with a spinner field that updates the border config
var view = Ext.create('MyApp.view.MyView', {
    border: 5,
    fullscreen: true,
    styleHtmlContent: true,
    html: 'Tap the spinner to change the border config option',
    items: {
        xtype: 'spinnerfield',
        label: 'Border size',
        docked: 'top',
        value: 5,
        minValue: 0,
        maxValue: 100,
        increment: 1,
        listeners: {
            spin: function(spinner, value) {
                view.setBorder(value);
            }
        }
    }
});

在 MVC 中的用法

我们建议大多数 Sencha Touch 应用程序遵循 MVC 约定，以便您的代码保持良好组织和可重用性。作为 MVC 中的“V”，视图也适合此结构。MVC 中关于视图的约定非常简单，并且直接遵循我们之前示例中使用的命名约定。

MyApp.view.MyView 类应在名为 app/view/MyView.js 的文件中定义

• 这允许应用程序自动查找和加载它。如果您还不熟悉基于 MVC 的 Sencha Touch 应用程序的文件结构，它非常简单 - 应用程序只是一个 html 文件，一个 app.js 文件，以及一组模型、视图和控制器，存储在 app/model、app/view 和 app/controller 目录中

  index.html app.js app/

    controller/
    model/
    view/
        MyView.js
  

您可以创建任意数量的视图，并在 app/view 目录中组织它们。通过在 app.js 文件中指定应用程序的视图，它们会自动加载

//contents of app.js
Ext.application({
    name: 'MyApp',
    views: ['MyView'],

    launch: function() {
        Ext.create('MyApp.view.MyView');
    }
});

通过遵循简单的视图命名约定，您可以轻松地在应用程序中加载和创建视图类的实例。之前的示例正是这样做的 - 它加载 MyView 类并在应用程序启动函数中创建它的实例。要了解有关在 Sencha Touch 中编写 MVC 应用程序的更多信息，请参阅 应用程序入门指南。