在 Sencha Touch 中使用组件

什么是组件？

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

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

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

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

什么是容器？

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

容器提供以下附加功能

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

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

实例化组件

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

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

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

要将此面板显示在屏幕上，我们只需将其添加到全局视口中

Ext.Viewport.add(panel);

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

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

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

配置组件

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

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

使用 xtype

Xtype 是一种创建组件的简单方法，无需使用完整的类名。这在创建包含子组件的 容器 时特别有用。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

向容器添加组件

如前所述，容器是可以通过布局排列子组件的特殊组件。前面的代码示例展示了如何创建面板，其中已在内部定义了两个子面板，但也可以在运行时完成此操作

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

在此情况下，我们为 mainPanel 提供了另一个 hbox 布局，但我们还引入了一些 defaults。这些应用于面板中的每个项目，因此在此情况下，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”事件并调用指定的侦听器函数。在此情况下，我们根据输入的名称过滤了 存储，但我们可以在那里提供任何其他函数。

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

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

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

将此类行为应用于整个应用程序非常容易，在这种情况下可以延长电池寿命。触发的其他有用事件如下

• show
• hide

每个组件在其类文档中列出了它触发的事件的说明。

对接

Sencha Touch 能够在其他容器内对接组件。例如，假设我们使用hbox 布局，并且希望在顶部放置一个横幅，我们可以使用对接，它提供了一种无需将容器嵌套在彼此内部即可实现此目的的方法

布局指南对对接和所有其他布局选项进行了全面讨论。

销毁组件

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

mainPanel.destroy();

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