基于人工智能的Ext JS网格筛选和分组

现在的企业用户不想学习网格的筛选器界面——他们只想直接提出需求：“显示上周的高优先级工单，按负责人分组，隐藏持续时间列。” 在最近一次 Sencha 网络研讨会上，销售工程师 Andres Villalba 演示了如何通过添加基于自然语言处理的智能搜索功能，将这种体验引入 Ext JS 网格。该功能可以将对话式请求转换为网格可以执行的结构化 JSON 指令。

为什么需要在 Ext JS Grid 中使用 AI 智能搜索？

Ext JS网格功能强大，但高级筛选和分组可能需要多次点击、领域知识和培训。AI 驱动的搜索允许用户用简单的语言表达意图，从而减少了这种繁琐的操作：

• “筛选德国年收入超过100万的客户。”
• “按最后更新时间降序排序。”
• “先按身份分组，再按所有者分组。”
• “隐藏时长和内部备注。”
• “重置一切。”

结果：更快的分析速度、更少的UI 组件，以及对非技术用户更友好的体验。

核心概念：自然语言 → 结构化 JSON（“编译器”模式）

该解决方案的核心是一个 AI 层，它可以将自然语言翻译成Ext JS 应用能够理解的操作计划。该模型不会返回文本，而是仅返回 JSON 数据，描述网格应该执行的操作。 典型的 JSON“指令集”可能包括：

• 筛选：字段（数据索引）、运算符、值
• 排序：字段 + 方向
• 分组：一个或多个字段
• 分页：页面大小、页码、重置分页
• 列可见性：隐藏/显示特定列
• 选择操作：选择/取消选择行（如适用）
• 重置：恢复默认网格状态

这正是 Villalba 所展示的：对话输入变成了确定性的、可执行的网格操作。

安全多层架构（推荐）

安全的实现方式使用四层：
Ext JS 前端

• 显示网格和文本字段（智能搜索栏）。
• 将用户提示和元数据（列架构）发送到中间件。

Node.js 中间件（Express）

• 保护机密信息：AI API 密钥保留在服务器端。
• 构建系统提示（架构+规则+示例）。
• 调用人工智能提供商并返回JSON 指令。

AI提供商（例如，Claude/Anthropic）

• 解释提示信息和模式。
• 返回严格的 JSON 数据（不包含任何描述信息）。

后端（Node.js / 数据库层）

• 获取实际网格数据并强制执行授权。
• 如果您的网格位于远程位置，则可以选择应用服务器端过滤/排序。

中间件为何重要（安全性 + 控制）

• 防止泄露提供商 API 密钥。
• 集中管理提示更新和验证规则。
• 启用日志记录、速率限制和输出验证。
• 允许您在不更改客户端的情况下切换提供商（Claude、OpenAI、本地 LLM）。

系统的“大脑”：强制执行正确 JSON 的提示工程

Villalba强调，最重要的工作发生在中间件的系统提示符中。要把这个模型当作一个严格的编译器，它必须针对你的JSON“语言”进行编译。

系统提示必须包含哪些内容？

1）角色定义
“您将用户请求转换为 Ext JS Grid 指令。”
2) 字段模式（列元数据）
请提供列名和列类型：
名称：字符串
年龄：数字
状态：枚举（包含允许的值）
创建于：日期
这可以减少幻觉，并改善操作员的选择。
3）操作员规则
仅允许您的 Ext JS 过滤支持的操作符（或您自己的映射），例如：
等于、不等于、大于、大于等于、小于、小于等于
像，包含，以……开头，在，之间
定义日期、列表、范围的表示方法。
4) 输出格式限制
“只返回JSON数据。不提供任何额外键。不提供任何解释。不道歉。”
5）少镜头示例
请提供 3-8 个示例，将实际用户查询映射到正确的 JSON。
这样就能将模型锚定到您指定的模式和命名约定上。

实用最佳实践：验证人工智能输出

即使有明确的提示，也应将 JSON 视为不可信输入：

• 根据 JSON 模式（例如 Ajv）进行验证。
• 拒绝未知字段/运算符。
• 应用授权限制（例如，用户不能对受限列进行筛选）。

实现概述：中间件 + Ext JS 前端[/h4
[h4]]Node.js 中间件（Express + Anthropic SDK）

中间件流程：
收到：
提示（用户输入）
列（网格元数据：数据索引、类型、允许的值）
构建系统提示：
模式 + 操作规则 + 严格的输出契约 + 示例
给人工智能模型打电话
将模型的 JSON 数据返回给客户端
关键点：发送元数据，而不是敏感的行级数据，除非您明确需要语义行解释——即使如此，也要谨慎。

Ext JS 前端集成

在客户端，即应用程序：
动态捕获网格列定义（使其保持同步）。
调用中间件：
用户提示
当前列（以及可选的当前排序/分组上下文）
接收JSON指令。
在视图控制器中执行它们：
过滤器

• 清除现有筛选条件。
• 使用数据索引、运算符、值应用新过滤器。

排序/分组
使用商店 API：

• store.sort([{ property, direction }])
• 根据版本/模式，使用store.group(field) 或 store.setGrouper(…)

列可见性

• 遍历列并根据 JSON调用column.setHidden(true/false) 。

重置操作

• 恢复默认排序器/分组器/过滤器/可见性。

安全、隐私和成本方面的考虑

隐私：不要泄露敏感数据

Villalba强调数据隐私：避免将机密数据发送给第三方模型。建议发送：

• 列名/类型
• 允许的枚举值
• 用户意图（提示）
• （可选）聚合元数据（计数、最小值/最大值），而不是原始记录

如果您需要完全的隐私保护，可以考虑使用LM Studio （或类似工具）构建本地 LLM ，并使用Axios等工具从中间件调用它。缺点是：对硬件要求更高，运维工作量更大。

成本：对于这种使用场景来说通常较低

由于您主要发送的是简短的提示和模式（而非大型数据集），因此令牌使用量很小。据网络研讨会报道，演示在两个月的开发/测试期间仅消耗了 1ofa5 额度中的 1ofa1，这表明如果设计得当，此功能可以非常经济。

Ext JS 版本兼容性

即使您使用的是较旧的 Ext JS 版本（例如5.1.2），大多数逻辑仍然适用，因为：
AI翻译是在中间件中实现的。
客户端主要通过标准商店/网格 API 应用筛选/排序/分组。
也就是说，如果您想要更简洁的封装、现代化的组件以及更轻松地重用智能搜索模块，建议使用Ext JS 6+ 。

常见问题解答

在 Ext JS Grid 中，AI 智能搜索可以做什么？

它允许用户输入自然语言请求，这些请求会被转换为 JSON 指令，用于筛选、排序、分组、分页、显示/隐藏列、选择行或重置网格。

为什么我需要Node.js中间件层？

为了确保 AI API 密钥的安全，应强制执行验证规则，规范提示，并防止客户端直接调用 AI，以免泄露机密信息或削弱治理。

我应该向人工智能模型发送什么内容？

请发送模式和意图，不要发送敏感的行级数据。请提供列名/类型、允许的枚举值和运算符规则，以便模型输出准确、可执行的 JSON。

我可以在不使用云端人工智能服务提供商的情况下，自行运行这个项目吗？

是的。在中间件后面使用本地 LLM（例如，通过 LM Studio）。这样会牺牲一些硬件和运维方面的便利性。

结论

利用 AI 驱动的自然语言控制来管理 Ext JS 网格是一种实用且安全的方式，能够让复杂的数据集更易于探索。其成功之处在于采用编译器式的提示工程，并结合基于中间件的架构，从而保护键值、验证输出并确保敏感数据的安全。通过精心设计的模式指导、严格的 JSON 输出以及 Ext JS 存储/网格的执行，您可以显著提升用户体验，而且通常成本极低。

英文原文：https://www.sencha.com/blog/ai-driven-filtering-and-grouping-for-ext-js-grids/