AI-Driven Filtering and Grouping for Ext JS Grids

Modern business users don’t want to learn your grid’s filter UI – they want to ask for what they need: “Show me high-priority tickets from last week, group by owner, hide the duration column.” In a recent Sencha webinar, Sales Engineer Andres Villalba demonstrated how to bring that experience to Ext JS Grid by adding NLP-powered smart search that converts conversational requests into structured JSON instructions your grid can execute.

Why AI Smart Search in Ext JS Grids?

Ext JS grids are powerful, but advanced filtering and grouping can require many clicks, domain knowledge, and training. AI-driven search reduces this friction by allowing users to express intent in plain language:

• “Filter customers in Germany with revenue over 1M.”
• “Sort by last updated descending.”
• “Group by status, then by owner.”
• “Hide duration and internal notes.”
• “Reset everything.”

Result: faster analytics, fewer UI Components, and a more approachable experience for non-technical users.

Core Concept: Natural Language → Structured JSON (The “Compiler” Pattern)

The heart of the solution is an AI layer that translates natural language into an action plan your Ext JS app understands. Instead of returning prose, the model returns JSON only, describing what the grid should do.

Typical JSON “instruction set” may include:

• Filtering: field (dataIndex), operator, value(s)
• Sorting: field + direction
• Grouping: one or more fields
• Paging: page size, page number, reset paging
• Column visibility: hide/show specific columns
• Selection actions: select/deselect rows (when applicable)
• Reset: restore default grid state

This is exactly what Villalba showcased: conversational input becomes deterministic, executable grid operations.

Secure Multi-Layer Architecture (Recommended)

A secure implementation uses four layers:

1. Ext JS Frontend
   • Displays the grid and a text field (smart search bar).
   • Sends the user prompt and metadata (column schema) to middleware.
2. Node.js Middleware (Express)
   • Protects secrets: AI API keys remain server-side.
   • Builds the system prompt (schema + rules + examples).
   • Calls the AI provider and returns JSON instructions.
3. AI Provider (e.g., Claude / Anthropic)
   • Interprets prompt + schema.
   • Returns strict JSON (no narrative).
4. Backend (Node.js / DB Layer)
   • Fetches actual grid data and enforces authorization.
   • Optionally applies server-side filtering/sorting if your grid is remote.

Why middleware matters (security + control)

• Prevents exposing the provider API key.
• Centralizes prompt updates and validation rules.
• Enables logging, rate limiting, and output validation.
• Lets you swap providers (Claude, OpenAI, local LLM) without changing the client.

The “Brain” of the System: Prompt Engineering That Enforces Correct JSON

Villalba emphasized that the most important work happens in the system prompt in middleware. Treat the model like a strict compiler that must target your JSON “language.”

What the system prompt must include

1) Role definition

• “You convert user requests into Ext JS Grid instructions.”

2) Field schema (column metadata)

• Provide column names and types:
  • name: string
  • age: number
  • status: enum (with allowed values)
  • createdAt: date
• This reduces hallucinations and improves operator selection.

3) Operator rules

• Only allow operators your Ext JS filtering supports (or your own mapping), such as:
  • =, !=, >, >=, <, <=
  • like, contains, startsWith, in, between
• Define how to represent dates, lists, ranges.

4) Output formatting constraints

• “Return JSON only. No extra keys. No explanations. No apologies.”

5) Few-shot examples

• Include 3–8 examples mapping realistic user queries to correct JSON.
• This anchors the model to your exact schema and naming conventions.

Practical best practice: Validate AI output

Even with strong prompts, treat the JSON as untrusted input:

• Validate against a JSON schema (e.g., Ajv).
• Reject unknown fields/operators.
• Apply authorization constraints (e.g., user can’t filter on restricted columns).

Implementation Overview: Middleware + Ext JS Frontend

Node.js Middleware (Express + Anthropic SDK)

The middleware flow:

1. Receive:
   • prompt (user input)
   • columns (grid metadata: dataIndex, type, allowed values)
2. Construct system prompt:
   • schema + operator rules + strict output contract + examples
3. Call the AI model
4. Return the model’s JSON to the client

Key point: send metadata, not sensitive row-level data, unless you explicitly need semantic row interpretation – and even then, be cautious.

Ext JS Frontend Integration

On the client, the app:

1. Captures grid column definitions dynamically (so it stays in sync).
2. Calls middleware with:
   • user prompt
   • current columns (and optionally current sort/group context)
3. Receives JSON instructions.
4. Executes them in the ViewController:

Filters

• Clear existing filters.
• Apply new filters using dataIndex, operator, value.

Sorting / Grouping
Use store APIs:

• store.sort([{ property, direction }])
• store.group(field) or store.setGrouper(…) depending on version/pattern

Column visibility

• Loop columns and call column.setHidden(true/false) based on the JSON.

Reset actions

• Restore default sorters/groupers/filters/visibility.

Security, Privacy, and Cost Considerations

Privacy: Don’t leak sensitive data

Villalba stressed data privacy: avoid sending confidential data to a third-party model. Prefer sending:

• column names/types
• allowed enum values
• user intent (prompt)
• optionally, aggregate metadata (counts, min/max), not raw records

If you need total privacy, consider a local LLM via LM Studio (or similar) and call it from your middleware using tools like Axios. Tradeoff: higher hardware needs, more ops effort.

Cost: Typically low for this use case

Because you’re mostly sending short prompts and schemas (not large datasets), token usage is small. In the webinar, the demo reportedly consumed about 1ofa1 of a 1ofa5 credit across two months of development/testing – illustrating that this feature can be inexpensive when designed efficiently.

Ext JS Version Compatibility

Even if you’re on older Ext JS (e.g., 5.1.2), most logic remains applicable because:

• The AI translation happens in middleware.
• The client mostly applies filters/sorts/groups via standard store/grid APIs.

That said, Ext JS 6+ is recommended if you want cleaner packaging, modern components, and easier reuse of the smart search module.

FAQs

What does AI smart search do in an Ext JS Grid?

It lets users type natural language requests that get converted into JSON instructions to filter, sort, group, page, show/hide columns, select rows, or reset the grid.

Why do I need a Node.js middleware layer?

To keep the AI API key secure, enforce validation rules, standardize prompts, and prevent direct client-to-AI calls that could expose secrets or weaken governance.

What should I send to the AI model?

Send schema and intent, not sensitive row-level data. Provide column names/types, allowed enum values, and operator rules so the model outputs accurate, executable JSON.

Can I run this privately without a cloud AI provider?

Yes. Use a local LLM (e.g., via LM Studio) behind your middleware. You’ll trade cloud convenience for hardware and operational requirements.

Conclusion

AI-driven natural language control for Ext JS grids is a practical, secure way to make complex datasets easier to explore. The winning approach is compiler-style prompt engineering plus a middleware-based architecture that protects keys, validates outputs, and keeps sensitive data safe. With careful schema guidance, strict JSON output, and Ext JS store/grid execution, you can deliver a dramatically faster user experience – often at surprisingly low cost.

Try Ext JS for free and experience AI-driven grid filtering.