在 Sencha Touch 中使用组件

什么是组件？

您在 Sencha Touch 中交互的大多数可视化类都是组件。Sencha Touch 中的每个组件都是 Ext.Component 的子类，这意味着所有组件都具有以下能力

• 使用模板将自身渲染到页面上
• 随时显示和隐藏自身
• 将自身在屏幕上居中
• 启用和禁用自身

组件还具有更高级的行为，使其能够

• 浮动在其他组件之上（窗口、消息框和覆盖层）
• 使用动画更改屏幕上的大小和位置
• 在其自身内部停靠其他组件（此功能对于工具栏很有用）
• 与其他组件对齐、允许自身被拖动、使其内容可滚动等等

什么是容器？

您创建的每个组件都具有上述所有能力，并且应用程序由许多组件组成，通常彼此嵌套。容器类似于组件，但除了先前列出的功能外，它们还允许您在其内部渲染和排列子组件。大多数应用程序都有一个名为 Viewport 的顶级容器，它占据整个屏幕。Viewport 内部是子组件，例如在邮件应用程序中，Viewport 容器的两个子组件可以是消息列表和电子邮件预览窗格。

容器提供以下附加功能

• 在实例化时和运行时添加子组件
• 删除子组件
• 指定 布局

布局决定了容器的子组件如何在屏幕上布局。在我们的邮件应用程序示例中，我们使用了 HBox 布局，这使我们能够将电子邮件列表固定到屏幕的左边缘，并允许预览窗格占据其余部分。Sencha Touch 中有几种布局可用，每种布局都可帮助您实现所需的应用程序结构，如 布局指南中所述。

实例化组件

组件的创建方式与 Sencha Touch 中的所有其他类相同 - 使用 Ext.create 方法调用。以下代码示例说明了 Panel 的创建

var panel = Ext.create('Ext.Panel', {
    html: 'This is my panel'
});

这将创建一个 Panel 实例，配置了一些基本的 HTML 内容。Panel 是一个简单的组件，可以渲染 HTML，并且还包含其他项目。在前面的示例中，我们创建了一个 Panel 实例，但它不会立即显示在屏幕上，因为项目在实例化后不会立即渲染。这允许我们在渲染和布局之前创建一些组件并移动它们，这比在渲染后移动它们要快得多。

为了在屏幕上显示此面板，我们可以简单地将其添加到全局 Viewport

Ext.Viewport.add(panel);

Panels 也是容器，这意味着它们可以包含其他组件，并由布局排列。让我们回顾一下之前的示例，这次创建一个带有两个子组件和一个 hbox 布局的面板

这次我们创建了三个 Panels - 第一个面板的创建方式与之前相同，但内部的两个面板是使用 xtype 内联声明的。Xtype 是一种创建组件的便捷方法，无需经历使用 Ext.create 和指定完整类名的过程，而是可以在对象中为类提供 xtype，框架会创建组件。

我们还为顶级面板指定了一个布局 - 在本例中为 hbox，它根据每个子项的“flex”参数拆分父面板的水平宽度。例如，如果上面的父 Panel 宽度为 300px，则第一个子项将拉伸为 100px 宽，第二个子项将拉伸为 200px 宽，因为第一个子项被赋予 flex: 1，第二个子项被赋予 flex: 2。

配置组件

每当您创建新组件时，都可以将配置选项传递给它。给定组件的所有配置都列在其类文档页面的“配置选项”部分中。您可以在实例化组件时传入任意数量的配置选项，并在稍后的任何时候修改它们。例如，您可以轻松修改 html 内容 在创建 Panel 后，如以下示例所示

每个配置都有一个 getter 方法和一个 setter 方法 - 这些方法是自动生成的，并且始终遵循相同的模式。例如，名为“html”的配置会自动接收 getHtml 和 setHtml 方法，而名为 defaultType 的配置会接收 getDefaultType 和 setDefaultType 方法，依此类推。

使用 xtype

Xtype 是一种创建组件的简便方法，无需使用完整的类名。当创建包含子组件的 Container 时，这尤其有用。xtype 只是指定组件的简写方式，例如，您可以使用 xtype: 'panel' 而不是键入 Ext.Panel。

以下说明了 xtype 的用法

xtype 列表

这是 Sencha Touch 中所有可用的 xtype 列表

xtype                   Class
-----------------       ---------------------
actionsheet             Ext.ActionSheet
audio                   Ext.Audio
button                  Ext.Button
component               Ext.Component
container               Ext.Container
image                   Ext.Img
label                   Ext.Label
loadmask                Ext.LoadMask
map                     Ext.Map
mask                    Ext.Mask
media                   Ext.Media
panel                   Ext.Panel
segmentedbutton         Ext.SegmentedButton
sheet                   Ext.Sheet
spacer                  Ext.Spacer
title                   Ext.Title
titlebar                Ext.TitleBar
toolbar                 Ext.Toolbar
video                   Ext.Video
carousel                Ext.carousel.Carousel
carouselindicator       Ext.carousel.Indicator
navigationview          Ext.navigation.View
datepicker              Ext.picker.Date
picker                  Ext.picker.Picker
pickerslot              Ext.picker.Slot
slider                  Ext.slider.Slider
thumb                   Ext.slider.Thumb
tabbar                  Ext.tab.Bar
tabpanel                Ext.tab.Panel
tab                     Ext.tab.Tab
viewport                Ext.viewport.Default

DataView Components
---------------------------------------------
dataview                Ext.dataview.DataView
list                    Ext.dataview.List
listitemheader          Ext.dataview.ListItemHeader
nestedlist              Ext.dataview.NestedList
dataitem                Ext.dataview.component.DataItem

Form Components
---------------------------------------------
checkboxfield           Ext.field.Checkbox
datepickerfield         Ext.field.DatePicker
emailfield              Ext.field.Email
field                   Ext.field.Field
hiddenfield             Ext.field.Hidden
input                   Ext.field.Input
numberfield             Ext.field.Number
passwordfield           Ext.field.Password
radiofield              Ext.field.Radio
searchfield             Ext.field.Search
selectfield             Ext.field.Select
sliderfield             Ext.field.Slider
spinnerfield            Ext.field.Spinner
textfield               Ext.field.Text
textareafield           Ext.field.TextArea
textareainput           Ext.field.TextAreaInput
togglefield             Ext.field.Toggle
urlfield                Ext.field.Url
fieldset                Ext.form.FieldSet
formpanel               Ext.form.Panel

将组件添加到容器

如前所述，容器是可以具有由布局排列的子组件的特殊组件。之前的代码示例之一展示了如何创建一个 Panel，其中已经定义了两个子 Panel，但这也可以在运行时完成

在此示例中，我们总共创建了三个 Panels。首先，我们创建了 aboutPanel，我们可能会用它来告诉用户一些关于应用程序的信息。然后我们创建了另一个名为 mainPanel 的面板，它已经在其 items 配置中包含第三个 Panel，其中包含一些占位符文本（“第一个面板”）。最后，我们通过调用 mainPanel 上的 add 方法将第一个面板添加到第二个面板。

在本例中，我们为 mainPanel 提供了另一个 hbox 布局，但我们也引入了一些 defaults。这些默认值应用于 Panel 中的每个项目，因此在本例中，mainPanel 中的每个子项都将获得 flex: 1 配置。这样做的效果是，当我们第一次渲染屏幕时，mainPanel 中只存在一个子项，因此该子项占据了可用的全部宽度。但是，一旦调用 mainPanel.add 行，aboutPanel 就会在其内部渲染，并且也被赋予 flex 1，这导致它和第一个面板都获得 mainPanel 全宽的一半。

同样，使用如下方法调用可以轻松地从容器中删除项目

mainPanel.remove(aboutPanel);

在此行运行后，应用程序将恢复到之前的状态，第一个子面板再次占据 mainPanel 内的全部宽度。

显示和隐藏组件

Sencha Touch 中的每个组件都可以通过简单的 API 调用显示或隐藏。在之前的 mainPanel 示例的基础上，以下是如何隐藏它的方法

mainPanel.hide();

这会隐藏 mainPanel 本身及其内部的任何子组件。再次显示组件非常容易预测

mainPanel.show();

同样，这将恢复 mainPanel 及其内部任何子组件的可见性。

事件

所有组件都会触发事件，您可以监听这些事件并采取操作。例如，每当在 文本字段 中键入内容时，都会触发其“change”事件。您可以使用 listeners 配置来监听该事件，如以下示例所示

Ext.create('Ext.form.Text', {
    label: 'Name',
    listeners: {
        change: function(field, newValue, oldValue) {
            myStore.filter('name', newValue);
        }
    }
});

每次文本字段的值更改时，都会触发“change”事件，并调用指定的侦听器函数。在本例中，我们按键入的名称过滤了 Store，但我们可以在那里提供任何其他函数。

Sencha Touch 组件会触发许多事件，使您可以轻松地连接到应用程序行为的大多数方面。它们也可以在组件创建后指定。

例如，假设您有一个仪表板，它轮询实时更新，并且您不希望在仪表板不可见时执行轮询，那么您可以连接到仪表板的 show 和 hide 事件

dashboard.on({
    hide: MyApp.stopPolling,
    show: MyApp.startPolling
});

像这样将行为应用于整个应用程序很容易，在本例中是为了节省电池寿命。触发的其他有用事件如下

• show
• hide

每个组件在其类文档中都列出了它触发的事件的描述。

停靠

Sencha Touch 具有在其他容器中停靠组件的能力。例如，假设我们正在使用 hbox 布局 并希望将横幅放置在顶部，我们可以使用停靠，它提供了一种无需将容器彼此嵌套即可执行此操作的方法

布局指南全面讨论了停靠和所有其他布局选项。

销毁组件

由于大多数移动设备的内存量有限，因此在不再需要组件时销毁组件通常是一个好主意。虽然这不是创建应用程序时首先要考虑的事情，但当您将应用程序推向生产环境时，这仍然是优化用户体验的好方法。销毁组件是使用代码完成的，如以下示例所示

mainPanel.destroy();

这将从 DOM 中删除 mainPanel，并删除它在特定 DOM 元素上设置的任何事件侦听器。它还会销毁 Panel 在内部使用的任何实例，并对其所有子组件调用 destroy 方法。在销毁组件后，其所有子组件也不再可用，该组件不再位于 DOM 中，并且对它的任何引用都不再有效。