游乐游手机版
首页/前端开发/文章详情

ExtJS3下拉框取值与文本实例详解

时间:2026-06-16 07:02
ExtJS3中Combobox通过hiddenName提交真实值,显示文本和实际值分别从不同DOM元素获取。按钮点击推荐使用Ext getCmp() fireEvent();文本框取值用Ext getCmp() getValue();按钮禁用、启用、隐藏分别调用disable()、enable()、setVisible()方法。

在使用 ExtJS 的 Combobox 组件时,hiddenName 是一个关键属性,它负责提交用户在组合框中所选选项的 value 值。这个设计逻辑有时会让新手感到困惑,特别是刚接触 ExtJS 框架的开发者。

抖音极速版赚钱快速提现方法☜☜☜☜☜点击保存

举个例子,假如某个 Combobox 的 Id 设置为 comboId,而它的 hiddenName 属性值为 hiddenValue。此时,通过 Ext.get('comboId').dom.value 获取到的是当前选中项的显示文本(text),并不是真正需要提交的 value 值。真正的 value 需要从 Ext.get('hiddenValue').dom.value 中读取。另外,直接使用 Ext.getCmp("ID值").getValue() 也能干净利落地拿到 value,省去了绕弯子的麻烦。

还有一个实用技巧:当处理 JSON 字符串时,如果想一次性移除所有换行、空格和制表符,可以这样写:.replace(/\s/g, ""); —— 一行代码轻松搞定。

接下来聊聊如何通过 ExtJS 触发按钮的点击事件。最直接的方法是查看 ExtJS 生成的 HTML 源码,找到该按钮在 DOM 中自动生成的 ID。比如:

方法1:使用原生 JavaScript,var btn = document.getElementById("ext-gen40"); 然后执行 btn.click();。但需要注意,ext-gen40 这类 ID 是由 ExtJS 随机分配的,在不同环境下可能变化,稳定性较差。

方法2:推荐使用 Ext.getCmp('title2d').fireEvent("click");,这里的 title2d 是你在 ExtJS 代码中自定义的组件 ID,固定且可靠。

如果想直接调用按钮的 handler 事件,可以这样操作:

var btn2d = Ext.getCmp("title2d");
btn2d.handler.call(btn2d.scope, btn2d);

请留意:onClick 是一个方法,而 handler 是一个配置项,两者在触发时机和调用方式上存在明显区别。

接下来讲解如何获取文本框的值,这里分为两种常见情况:

1. 原生 HTML 文本框: 例如

取值方式有两种:

  • var tValue = Ext.getDom('test').value;
  • var tValue = document.getElementById('test').value;

2. ExtJS 组件文本框: 例如通过 xtype:'textfield' 定义的字段,通常还会设置 id: 'test'

推荐使用以下方式取值:

  • var tValue = Ext.getCmp('test').getValue();
  • 或者 Ext.get('test').dom.value,但前者更贴合 ExtJS 组件的使用习惯。

相对地,给文本框设置值也非常便捷:Ext.getCmp('test').setValue("设置的值");

最后说一下按钮的启用和禁用控制,操作十分简单:

  • 禁用:Ext.getCmp('btnQc').disable();
  • 启用:Ext.getCmp('btnQc').enable();

还有两种常用的控制方式:一种是在定义 bbar 中的按钮时直接配置属性,比如 hidden : true 用于隐藏,disabled : true 用于禁用。另一种是先给按钮添加 id,然后在 panel 的相关事件中调用对应方法。此外,Ext.getCmp('btn').setVisible(false); 可以实现隐藏,Ext.getCmp('btn').setVisible(true); 则让按钮重新显示。

这些小技巧在实际开发中非常实用,随手记录下来,可以省去每次翻查文档的时间。

来源:https://www.jb51.net/article/33853.htm
上一篇ExtJS4 Grid单元格背景颜色修改与Column render教程 下一篇ExtJS下动态生成XML并兼容火狐的写法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML双英雄图精准居中与并排对齐实战指南
前端开发 · 2026-07-04

HTML双英雄图精准居中与并排对齐实战指南

本文详解如何使用CSS Flexbox将两个英雄图在页面中水平居中、等高对齐,并保持50px间距,解决justify-content align-items单独作用于子元素无效的问题。 想让两个视觉冲击力十足的英雄图在首页并排居中,是提升首屏吸引力的经典设计。但很多开发者都踩过同一个坑:直接在 `

Flexbox实现div水平垂直居中的方法
前端开发 · 2026-07-04

Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中,推荐在父容器上设置 display: flex,并配合 justify-content: center(控制主轴居中)与 align-items: center(控制交叉轴居中),同时确保父容器拥有明确高度,例如 min-height: 100vh

React循环中正确管理多个独立Modal实例的方法
前端开发 · 2026-07-04

React循环中正确管理多个独立Modal实例的方法

在 React 开发中,我们常常会遇到这样的场景:需要在一个列表循环里渲染多个弹窗(Modal)。如果处理不当,点击任何一个按钮,都会导致所有的弹窗同时打开或关闭,这显然不是我们想要的效果。问题的根源在于状态管理:当多个 Modal 实例共享同一份控制其显示隐藏的状态时,它们的行为就被捆绑在了一起。

鼠标滚动切换图片与7秒无操作自动轮播完整教程
前端开发 · 2026-07-04

鼠标滚动切换图片与7秒无操作自动轮播完整教程

本文介绍如何结合鼠标滚轮交互与定时器机制,实现图片在用户滚动时手动切换、7秒无操作后自动轮播的双重功能,并提供可复用、多实例支持的现代化 JavaScript 解决方案。 在网页开发中,图片轮播组件虽然常见,但许多实现方案在用户体验上仍存遗憾。例如,完全依赖用户滚动切换的轮播,当用户停止操作专注查看

输入新城市自动清除旧天气数据实现方法
前端开发 · 2026-07-04

输入新城市自动清除旧天气数据实现方法

本文详解如何借助 JavaScript 在用户切换查询城市时,自动清空先前展示的天气信息,避免新旧数据混杂叠加,从而优化单页应用的交互体验。 在基于 OpenWeather API 打造天气查询工具时,很多开发者都会遇到一个颇为棘手的小问题:用户查完一个城市后,紧接着输入另一个城市名称,页面上新旧天