Sencha Touch入门与未来展望

"Sencha Touch 是一款用于构建移动Web应用的JavaScript框架，专注于提供高性能、交互式的触控体验。随着移动设备的普及，Sencha Touch 有望成为开发跨平台移动应用的重要工具。" Sencha Touch 提供了一系列组件和功能，使得开发者能够轻松地创建具有桌面级用户体验的移动应用。它基于Ext JS，但针对移动设备的特性进行了优化，如触摸事件处理和性能提升。通过使用Sencha Touch，开发者可以构建包含列表、表格、图表、表单等复杂布局的应用，并支持多种移动操作系统，如iOS、Android和BlackBerry。 在提供的代码示例中，我们可以看到以下几个Sencha Touch的关键知识点： 1. **模型（Models）**：`Ext.regModel('Cars', { fields: [...] })` 这行代码注册了一个名为"Cars"的模型，定义了一个数据结构，其中包含一个字段"text"，类型为字符串。模型在数据驱动的应用中起到核心作用，用于封装和管理数据。 2. **字段（Fields）**：`fields: [{ name: 'text', type: 'string' }]` 定义了模型的字段，包括字段名和类型。这有助于Sencha Touch在处理数据时进行正确的类型转换和验证。 3. **表单（Forms）**：`var txtFld = new Ext.form.Text({ label: 'Name' })` 创建了一个文本输入字段，带有标签"Name"。表单组件允许用户输入和编辑数据，是Sencha Touch中与用户交互的重要组成部分。 4. **面板（Panels）**：`var editPnl = new Ext.Panel({ ... })` 创建了一个浮动、居中、模态的面板，其中包含顶部和底部的工具栏以及一个表单组件。面板是Sencha Touch中构建界面的基本元素，可以容纳各种组件并管理其布局。 5. **计算宽度**：`calculateDesiredWidth()` 函数用于计算面板的理想宽度，确保在不同屏幕尺寸下都有良好的视觉效果。这里考虑了视口宽度和一个最小宽度限制。 6. **工具栏（Toolbars）**：`xtype: 'toolbar'` 用于创建顶部和底部的工具栏，其中包含操作按钮，如"Cancel"和"Change"。工具栏是添加导航和控制功能的好方法。 7. **事件处理器（Event Handlers）**：`handler: function() {...}` 定义了按钮点击时执行的函数，例如取消编辑或保存更改。Sencha Touch提供了丰富的事件系统，便于响应用户操作。 8. **数据操作**：`record.set('text', txtFld.getValue())` 和 `activeList.getSelectionModel().select(record)` 用于更新选中记录的数据，并重新选择记录以保持选中状态。这展示了Sencha Touch如何处理数据模型和视图之间的同步。 9. **布局和定位**：`centered: true` 和 `dockedItems` 属性用于设置面板的居中显示和组件的停靠位置，使得界面布局更加灵活。 通过学习和掌握这些Sencha Touch的核心概念和用法，开发者可以构建出功能丰富、用户体验优秀的移动应用。虽然Sencha Touch可能不是当前的主流，但它提供的强大功能和灵活性使其在移动开发领域仍具有一定的价值。