在使用 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); 则让按钮重新显示。
这些小技巧在实际开发中非常实用,随手记录下来,可以省去每次翻查文档的时间。
