sencha touch 折叠list

Sencha Touch 是一款用于开发移动Web应用程序的JavaScript框架，它提供了丰富的组件库，使得开发者能够构建功能强大的、响应式的移动应用。在Sencha Touch中，`折叠List`（Accordion List）是一种特殊类型的列表，用于展示可以展开和折叠的条目，这种设计常用于展示层级关系的数据或节省屏幕空间。 `折叠List`的核心概念是`Ext.dataview.Accordion`，它继承自`Ext.List`。`Ext.List`是Sencha Touch中基础的列表组件，可以显示一列可滚动的项目，而`Accordion List`则在其基础上增加了折叠和展开的功能。 ### 1. 创建折叠List 创建一个折叠List首先需要定义一个`Ext.dataview.Accordion`实例。配置项包括数据源（`store`）、列表项模板（`itemTpl`）以及每个条目的唯一标识（`itemId`或`index`）。例如： ```javascript Ext.create('Ext.dataview.Accordion', { store: myStore, // 数据存储对象 itemTpl: '<div>{title}</div>', // 每个条目的模板，这里以简单的标题为例 defaults: { cls: 'accordion-item', bodyPadding: 10 } }); ``` ### 2. 数据源 折叠List的数据源通常是一个`Ext.data.Store`对象，其中包含要显示的条目。每个条目应包含展开/折叠状态的相关信息，例如一个`expanded`字段来标记当前条目是否展开。你可以通过监听`store`的`load`事件来处理数据加载后的逻辑。 ```javascript var myStore = Ext.create('Ext.data.Store', { fields: ['title', 'content', 'expanded'], // 字段定义 data: [ { title: '条目1', content: '内容1', expanded: true }, { title: '条目2', content: '内容2', expanded: false }, // 更多条目... ] }); ``` ### 3. 自定义行为 - `expandOnTap`：默认情况下，用户点击条目时会自动展开/折叠。你可以设置`expandOnTap`为`false`来禁用此行为。 - `animation`：折叠List展开和折叠的动作可以通过`animation`配置项进行定制，例如设置动画的持续时间和效果。 - `multiSelect`：允许同时展开多个条目，设置`multiSelect`为`true`。 ### 4. 事件监听 Sencha Touch 提供了丰富的事件监听机制，你可以监听`itemtap`事件来处理用户点击条目时的行为。例如，你可能需要更新条目的展开状态，并相应地更新数据源。 ```javascript listeners: { itemtap: function(list, index, target, record) { record.set('expanded', !record.get('expanded')); list.refreshItem(index); // 刷新指定索引的条目 } } ``` ### 5. 自定义模板 通过`itemTpl`配置项，你可以完全自定义每个条目的HTML结构和样式。这包括折叠/展开按钮、内容区域等。 ```javascript itemTpl: [ '<div class="accordion-header">', '<span class="title">{title}</span>', '<span class="toggle-{expanded}">[+]</span>', '</div>', '<div class="accordion-content">{content}</div>' ], ``` ### 6. 性能优化 对于大数据量的折叠List，性能优化是必不可少的。可以使用虚拟滚动（`virtualScroll`）来只渲染可视区域的条目，或者利用`bufferedRenderer`来按需加载和显示数据。 Sencha Touch 的折叠List提供了灵活的布局和交互方式，适合用于展现层次结构信息。理解其核心概念、配置项以及如何与数据源和事件系统交互，可以帮助你创建出功能强大的移动应用界面。