13、数据的输入与输出：Sencha Touch 实践指南

vim8coder

于 2025-11-20 14:01:46 发布

阅读量8

点赞数

CC 4.0 BY-SA版权

分类专栏： Sencha Touch实战指南文章标签： Sencha Touch 数据输入数据输出

本文链接：https://blog.youkuaiyun.com/vim8coder/article/details/155288728

Sencha Touch实战指南专栏收录该内容

20 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

数据的输入与输出：Sencha Touch 实践指南

1. 数据输入

在数据输入方面，我们将使用与之前示例相同的存储（store）和模型（model），不过会添加一个列表和一个表单，这样就能添加新联系人并查看添加的内容。

1.1 创建列表

以下是创建列表的代码：

this.viewport = new Ext.Panel({
    fullscreen: true,
    layout: 'fit',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            text: 'Add',
            handler: function() {
              addNewContact.show()
            }
        }]
    }],
    items: [
    {
      xtype: 'list',
      itemTpl: '{name}: {email}',
      store: contactStore
    }]
});

这里大部分代码在之前的示例中都很常见。我们有一个包含列表组件的面板，列表有一个模板（itemTpl），使用与联系人模型相同的字段名来安排显示方式。还添加了一个停靠的工具栏，带有新的“Add”按钮，点击该按钮会显示 addNewContact 表单。