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

在使用 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); 则让按钮重新显示。

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