ComboBox on demand? - Ext JS

本文探讨了一种实现大量组合框字段按需加载的方法,通过将这些字段初始化为只读文本框,当用户点击时转换为活动元素,并在失去焦点时变回文本框。介绍了一种使用编辑器功能来实现这一目标的具体方案。
I'm building a page with multiple (50-100) typeahead fields. The fields are procedurally generated and can be similarly hooked up via something like:
whatever.select('.Typeahead').foreach( ... build a reader, build a store, build a combo, applyTo(el); )

But that's a lot of work on a page where the user may only interact with 1-5 of the combos. I'm wondering if there is any sort of lightweight on-demand creation I can do. The closest analogy I can think of is to the Grid control and its on-demand editing of cells.

Do you think it would be possible to instantiate my form fields as "single cells" which are basically read-only text boxes until you click on them, at which point they transform in-place into active elements, and then back into text boxes on blur?

I know that there is an applyTo() method on combo boxes to take over existing elements. Is there an opposite function that can undo the effect?

I'm going to try this and see if it works, but if anyone has already attempted this, could you let me know? Thanks!
Steve
Reply With Quote
  #2  
Old 03-13-2007, 12:48 AM
Default

AFAIK, you'd have to remove the element and recreate it to do what you want (which any code to undo it would probably have to do anyways since I think it undos the id and modifies css classes).
Reply With Quote
  #3  
Old 03-13-2007, 01:45 AM
Default

I would use an editor, that's what they are for.

You can either use normal textboxes or you can even use a div, span or whatever. The editor functionality in the grid is reusable on any element. The current implementation doesn't include save/cancel buttons or ajax support, but there will be a subclass in a future release that includes it.

First create your editor:

var editor = new Ext.Editor(new Ext.ComboBox({....

Then use your normal DomQuery select and wire up on focus or mousedown or whatever you want.

When the event fires, call startEditing(plainInput, plainInput.value); . There are other config options you may want to modify.

Subscribe the the combo select event or blur event and update the orginal box and hide the editor.

The editor stuff was specifically refactored to support exactly what you want to do.
Reply With Quote
  #4  
Old 03-13-2007, 01:53 AM
Default

Thanks Jack, that's where I was heading with this and figured you'd have already taken care of it
Reply With Quote
AI智能图表创作平台,轻松对话绘图 Next AI Draw.io 是一款融合大语言模型与 draw.io 的创新型图表绘制平台。无需掌握复杂的绘图规则,只需通过自然语言输入,即可完成图表构建、修改与增强,帮助开发者和可视化创作者大幅提升效率。无论你是想绘制 AWS 架构图、GCP 拓扑,还是一个带有动画连接器的系统结构图,这款工具都能通过智能对话快速呈现。 核心亮点 LLM驱动的图表构建 通过 Chat 接口与 AI 对话,快速生成符合语义的图表,轻松支持 draw.io XML 格式解析。 图像识别与复制增强 上传一张已有图表或架构草图,AI 自动识别结构并重建图表,可进一步优化样式或内容。 图表版本管理 内置图表历史记录系统,支持版本切换与回滚,便于团队协作与修改回溯。 交互式绘图对话体验 内置对话界面,可边聊边画图,所见即所得,轻松优化图表结构与排版。 多云架构模板一键生成 支持 AWS、GCP、Azure 架构图自动生成,适配图标库,适合开发、运维、架构师使用。 GCP架构图 动画连接器 支持为图表元素添加动态连接器,提升图表交互性与演示感。 技术架构与支持 Next.js:提供稳定高性能的前端体验 Vercel AI SDK:整合流式对话与多模型支持 react-drawio:实现图表编辑与可视化渲染 多模型接入:支持 OpenAI、Anthropic、Google、Azure、DeepSeek、Ollama 等主流 AI API claude-sonnet-4-5 专项训练:在 AWS 架构图任务上表现优异
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值