Extjs自定义组件实例与数据存储

在本文档中，我们讨论的是如何在ExtJS中单独定义并使用不同类型的组件。作者分享了一个具体的代码示例，旨在帮助读者理解和实现自定义组件的创建和交互。 首先，我们关注于`SimpleStore`类的实例化。`SimpleStore`是ExtJS中用于存储数据的轻量级数据模型，它在前端的数据绑定和表格操作中非常常见。在这里，`dtCategory`数组被定义为一个二维数组，包含了商品分类的名称和对应的值。`stCategory`变量通过`Ext.data.SimpleStore`构造函数创建，设置了两个字段：`value`和`text`，分别对应于数组中的值和文本。`data`属性被设置为`dtCategory`，从而将数据绑定到这个存储对象上。 接着，代码定义了一个`ComboBox`（组合框）组件，用于用户选择商品种类。组件ID设为`cbCategory`，其属性包括存储对象`stCategory`（作为数据源）、显示字段`displayField`、值字段`valueField`等。该组件还设置了其他选项，如自动提示（`typeAhead`）、本地模式（`mode: 'local'`）、触发动作（`triggerAction: 'all'`），以及搜索框的提示信息和验证规则。 随后，一个`TextField`（文本域）`tfName`用于用户输入产品名称，而`Button`组件`btnSearch`则作为搜索功能的触发器。当用户点击搜索按钮时，`handler`方法被调用，它加载`stProduct`（假设是一个类似`SimpleStore`的数据模型）数据，并传递参数，包括起始位置、每页数量、类别名（来自`cbCategory`的选择）和产品名（来自`tfName`的输入）。 最后，文档中提到了另一个`Button`组件`btnHelp`，但其具体功能和实现没有在这部分代码中给出。通常，这样的帮助按钮可能会链接到帮助文档或提供关于其他操作的指导。 总结来说，这段代码展示了如何在ExtJS中使用`SimpleStore`来管理数据，并通过`ComboBox`、`TextField`和`Button`组件创建用户界面。它强调了组件间的交互和数据驱动的前端开发实践。学习者可以借此理解如何根据需求定制ExtJS应用的不同组件，并确保它们协同工作以实现预期的功能。