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

数据的输入与输出：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 表单。

1.2 创建表