ExtJS 实现动态高级查询功能

"这篇文章主要介绍了如何在ExtJS框架下实现通用查询功能，支持多种数据类型的查询条件，并且可以通过Ext.data.JsonStore与服务器进行方便的数据交互。" 在ExtJS开发中，构建一个通用查询功能是非常常见且重要的任务。该功能允许用户根据需求动态添加多个查询条件，并定义这些条件之间的逻辑关系，从而实现灵活的筛选数据。这里，我们看到一个高级查询界面的示例，它支持以下数据类型： 1. **整型（Integer）**：用于处理整数值的查询条件，如年龄、ID等。 2. **浮点型（Float）**：用于处理包含小数的数值，如价格、权重等。 3. **字符串型（String）**：用于文本信息的查询，如姓名、地址等。 4. **日期型（Date）**：处理日期和时间的查询，如创建时间、修改时间等。 5. **布尔型（Boolean）**：用于是/否或者真/假的选择，例如某个状态是否开启。 6. **自定义选择列表（Custom Selection List）**：提供用户自定义的选项列表，如下拉菜单中的国家、地区等。 代码示例中，从第7行到第10行引入了ExtJS库的相关CSS和JavaScript文件，确保页面可以正确渲染和运行ExtJS组件。接着，从第11行到第15行，创建了一个`JsonStore`实例（vardsPQ），用于存储查询结果或交互数据。`JsonStore`是ExtJS提供的一个数据存储类，它可以接收JSON格式的数据并将其绑定到Grid、Form等组件上。 字段配置（fields）部分（未完全显示）定义了数据模型，如"idx"字段，这可能是用于排序或索引的字段。在实际应用中，还会有其他字段来匹配查询条件。 在实现查询功能时，通常会涉及以下步骤： 1. **创建查询表单（Query Form）**：使用ExtJS的FormPanel组件构建查询表单，每个查询条件可以是TextField、ComboBox、DateField等控件。 2. **逻辑关系设置**：用户可以选择AND或OR来组合多个查询条件，这可能需要自定义控件或扩展ExtJS现有的组件来实现。 3. **提交查询**：当用户提交查询时，FormPanel中的数据会被转换成JSON格式并通过Ajax请求发送到服务器。 4. **服务器处理**：服务器端接收到请求后，解析JSON数据，执行SQL查询或其他数据检索操作。 5. **返回结果**：服务器将查询结果以JSON格式返回，`JsonStore`接收到数据后更新其记录集。 6. **展示结果**：查询结果通常会显示在GridPanel或类似的组件中，用户可以查看、分页、排序和筛选结果。 通过这样的通用查询功能，开发者可以构建一个强大且灵活的后台数据查询界面，提升用户体验并减少代码重复。同时，利用ExtJS的事件驱动和组件化特性，可以轻松地扩展和定制查询界面以满足各种业务需求。