在应用程序中使用视图

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

使用现有组件

创建视图的最简单方法是使用 Ext.create 和现有组件。例如，如果我们想创建一个带有内部 HTML 的简单面板，我们可以使用以下代码

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

此示例创建一个带有 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 块中指定，也可以在我们创建类实例时指定。定义子类时，请确保使用 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 应用程序中的一个视图类

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 数组中使用了搜索字段，我们指示新视图需要 Ext.field.Search 类。目前，动态加载系统无法识别由 xtype 指定的类，因此我们需要手动定义依赖项

• xtype - 为我们的新类提供其自己的 xtype，使我们能够轻松地在配置对象中创建它，这类似于使用搜索字段采用的方法

这使我们能够通过几种方式创建新视图类的实例

//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 之后，我们向组件的元素添加一个轻触侦听器，该侦听器在每次轻触元素时调用 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 函数是可选的，但请注意你必须返回一个值，否则不会发生任何事情。

在 applyBorder 函数转换值之后调用 updateBorder 函数，通常用于修改 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 应用程序，请参阅 应用程序指南简介。