文档帮助

目录

术语、图标和标签 访问级别 成员类型 成员语法 成员标志 类图标 成员图标 导航和功能 类成员快速导航菜单 Getter 和 Setter 方法 历史记录栏 搜索和过滤器 API 文档类元数据 展开和折叠示例及类成员 桌面 -vs- 移动视图 查看类源代码

术语、图标和标签

许多类在使用配置对象创建（实例化）类时都有快捷名称。快捷名称被称为 alias（别名）（如果类扩展自 Ext.Component，则为 xtype）。别名/xtype 列在适用类的类名称旁边，以便快速参考。

访问级别

框架类或其成员可以指定为 private（私有的）或 protected（受保护的）。否则，类/成员是 public（公共的）。Public、protected 和 private 是访问描述符，用于传达类或类成员应如何以及何时使用。

成员类型

成员语法

下面是一个类成员示例，我们可以对其进行剖析，以展示类成员的语法（在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法）。

Ext.container.Container
查看源代码
lookupComponent ( item ) : Ext.Component
受保护的

当原始配置对象添加到此容器时调用，无论是在 items 配置的初始化期间，还是在添加新项目 added) 或 {@link #insert 插入 时。

此方法将传递的对象转换为实例化的子组件。

当需要对子组件创建应用特殊处理时，可以在子类中重写此方法。

参数

item :  Object

正在添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看看成员行的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 单例框架类。*有关更多信息，请参阅单例标志

- 组件类型框架类（Ext JS 框架中扩展自 Ext.Component 的任何类）

- 表示类、成员或指南在当前查看的版本中是新的

成员图标

- 表示 config 类型的类成员

- 表示 property 类型的类成员

- 表示 method 类型的类成员

- 表示 event 类型的类成员

- 表示 theme variable 类型的类成员

- 表示 theme mixin 类型的类成员

- 表示类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面上的类名称正下方是一行按钮，对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数（此计数会随着过滤器的应用而更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单，以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的 config 部分中，就在它们所作用的 config 下方。Getter 和 Setter 方法文档将在 config 行中找到，以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中，并显示在顶部标题栏正下方（使用可用的实际空间）。默认情况下，显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选选项来扩展显示的内容。这将显示所有产品/版本的所有最近页面历史记录栏。

在历史记录配置菜单中，您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选选项过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。

如果在历史记录配置菜单中选择“全部”，则“在历史记录栏中显示产品详细信息”的复选框选项将启用。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上，还有一个过滤器输入字段，该字段使用过滤器字符串过滤成员行。除了按字符串过滤外，您还可以按访问级别、继承和只读来过滤类成员。这可以通过页面顶部的复选框完成。

API 类导航树底部的复选框过滤类列表，以包含或排除私有类。

单击空的搜索字段将显示您最近 10 次搜索，以便快速导航。

API 文档类元数据

每个 API 文档页面（Javascript 原始类型页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项

展开和折叠示例及类成员

可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。

类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠全部切换按钮来展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过单击 API 文档页面顶部的类名称来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。

Sencha Touch 2.4


顶部

目录

创建简单的 DataView 从服务器加载数据 样式化 DataView 组件 DataView

在 Sencha Touch 中使用 DataViews

DataView 使您可以轻松地动态创建许多组件，通常基于 store。它用于呈现来自服务器后端或任何其他数据源的数据，并为 list 等组件提供支持。

当您想要重复显示相同组件的集合时，可以使用 dataView，例如在以下情况下

  • 电子邮件应用程序中的消息列表
  • 最新新闻或推文列表
  • HTML5 音乐播放器中的平铺专辑集

创建简单的 DataView

最简单的情况是，dataView 是一个包含数据的 store 和一个用于呈现每个 store 项目的模板，如下例所示

在此示例中，我们内联定义了 store，因此所有数据都是本地的，因此不必从服务器加载。对于 store 中定义的每个数据项，dataView 都会呈现一个 div 并传入名称和年龄数据。该 div 使用指定的 itemTpl 并在花括号占位符内呈现数据。

因为 dataView 与 store 集成，所以对 store 的任何更改都会立即反映在屏幕上。例如，如果我们在 store 中添加了一个新记录，它将被呈现到我们的 dataView 中

touchTeam.getStore().add({
    name: 'Liz Lemmons',
    age: 33
});

在添加如上一个代码示例中所示的新记录之后，我们不必手动更新 dataView，因为它会自动更新。如果我们修改 store 中的现有记录之一，也会发生同样的情况

touchTeam.getStore().getAt(0).set('age', 42);

这将获取 store 中的第一个记录，并将年龄更改为 42，并自动更新屏幕内容。

从服务器加载数据

我们通常希望从服务器或其他 Web 服务加载数据，这样我们就不必在本地硬编码数据内容。假设我们想要将最新的 Sencha 论坛主题加载到 dataView 中，并为每个主题呈现主题标题。为此，我们需要修改 dataView store 和 itemTpl，如下所示

在此示例中，dataView 不再包含数据项，而是我们提供了一个 proxy，用于获取数据。在本例中，我们使用了 JSON-P 代理，该代理使用 Sencha 的 JSON-P 论坛结果加载数据。我们还为每个主题指定了标题，并使用 Store 的 autoLoad 配置自动加载数据。最后，我们配置了一个 Reader 来解码来自 Sencha.com 的响应，指示它期望 JSON，并且在 JSON 响应的“topics”部分找到主题。

样式化 DataView

您可能已经意识到，尽管我们的 dataView 正在显示来自 store 的数据，但它没有任何默认样式。缺少默认样式是故意的，但添加自定义 CSS 非常简单。dataView 有两个配置支持将您的自定义 CSS 定位到视图：baseCls 和 itemCls。baseCls 用于在 dataView 的外部元素周围添加 className。您提供的 itemCls 将添加到呈现到我们的 dataView 中的每个项目中。

如果您没有指定 itemCls，它会自动采用 baseCls 配置（默认为 x-dataview）并在其前面加上 -item。因此，每个项目都将具有 x-dataview-item 的 className。

在添加配置之前，我们需要创建以下示例中显示的自定义 CSS

.my-dataview-item {
    background: #ddd;
    padding: 1em;
    border-bottom: 1px solid #ccc;
}
.my-dataview-item img {
    float: left;
    margin-right: 1em;
}
.my-dataview-item h2 {
    font-weight: bold;
}

CSS 完成后，我们可以回到我们之前的 JSONP 示例并添加 baseCls 配置

Ext.create('Ext.DataView', {
    fullscreen: true,
    store: store,
    itemTpl: '<p>{title}</p>',
    baseCls: 'my-dataview',
    //As described above, we don't need to set itemCls in most 
    //cases as it will already add a className
    //generated from the baseCls to each item.
    //itemCls: 'my-dataview-item'                
});

组件 DataView

在之前的示例中，我们创建了一个带有 dataView 的 itemTpl，这意味着每个项目都从 XTemplate 呈现为基本 div。但是，有时您需要每个项目都是一个组件，以便您可以为用户提供丰富的 UI。在 Sencha Touch 中，我们引入了 useComponents 配置，允许您解决这种情况。

创建组件 dataView 与创建之前显示的基于模板的普通 dataView 非常相似，但是您必须定义在呈现列表中的每个项目时使用的项目视图。store 的每个记录都将转换为 dataItem，它扩展自 container，因此您可以在其中包含多个组件。在此示例中，我们使用自定义 updateRecord 方法实现，该方法根据数据值更新 DataItems 的组件

另一个更高级的示例，使用 datamap

Ext.define('MyListItem', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'mylistitem',

    config: {
        nameButton: true,

        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },

    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },

    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});

此示例演示如何定义基于组件的 dataView 项目组件。关于此示例，有几个重要的注意事项

  • 我们必须为每个项目扩展 dataItem。这是一个抽象类，用于处理每个项目的记录处理。

  • 在 extend 代码之后，我们需要项目组件内部的 Ext.Button。

  • 我们为此项目组件指定 xtype。

  • 在 config 块内部，我们定义 nameButton 项目。添加到组件的此自定义配置将通过类系统转换为 button。默认情况下，我们将其设置为 true，但这也可以是一个配置块。此配置会自动为 nameButton 项目生成 getter 和 setter。

  • 我们定义 datamap。dataMap 是 model 的数据与此视图之间的映射。getNameButton 是您要更新的实例的 getter；所以在这种情况下，我们想要获取此组件的 nameButton 配置。在该块内部，我们然后为其提供该实例的 setter，在本例中为 setText，并为其提供我们正在传递的记录的字段。因此，一旦此项目组件获得记录，它就会获得 nameButton，然后使用记录的 name 值调用 setText。

  • 最后，我们定义 nameButton 项目的 apply 方法。apply 方法使用 factory。然后返回该实例，然后导致调用 updateNameButton。updateNameButton 方法删除旧的 nameButton 实例（如果存在），并添加新的 nameButton 实例。

创建项目组件后，我们可以创建组件 dataview，类似于之前的示例。

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Greg',  age: 100},
            {name: 'Brandon',   age: 21},
            {name: 'Scott',   age: 21},
            {name: 'Gary', age: 24},
            {name: 'Fred', age: 24},
            {name: 'Seth',   age: 26},
            {name: 'Kevin',   age: 26},
            {name: 'Israel',   age: 26},
            {name: 'Mitch', age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'mylistitem'
});

此代码有两个关键添加项。首先，我们添加了 useComponents 配置并将其设置为 true。其次，我们将 defaultType 配置设置为之前创建的 mylistitem 项目组件。这告诉 dataview 将定义的项目组件用作每个项目的视图。

如果我们一起运行此代码，我们可以看到组件 dataview 正在运行。

这种方法的最大好处是它为您的 dataview 增加了灵活性。由于每个项目组件都可以访问其自己的 Ext.dataview.component.DataItem#record，因此您可以对其执行任何操作。

在以下示例中，我们向 nameButton 添加一个事件监听器，以监听 tap 事件，该事件会警告用户所选人员的年龄。

Ext.define('MyListItem', {
    //...

    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            // add an event listeners for the `tap` event onto the new button, and
            // tell it to call the onNameButtonTap method
            // when it happens
            newNameButton.on('tap', this.onNameButtonTap, this);

            this.add(newNameButton);
        }
    },

    onNameButtonTap: function(button, e) {
        var record = this.getRecord();

        Ext.Msg.alert(
            record.get('name'), // the title of the alert
            "The age of this person is: " + record.get('age') 
            // the message of the alert
        );
    }
});

最后，在将此代码添加到我们之前的示例之后，我们得到了以下最终结果

Sencha Touch 2.4