---
title: "组件与表单"
description: "组件值、校验、组件状态和 iframe 辅助方法。 共 29 个 Wb 公共方法。"
---
> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.
# 组件与表单
本文档由项目中的 `wb-debug.js` 自动提取。每个条目包含源码提炼的使用说明、优先采用源码示例的用法示例，以及完整 JSDoc 供参数和行为核对。
## Wb.getValue
```javascript
Wb.getValue(components, itemIds, getFileName);
```
源码：`wb-debug.js:1468`
**使用说明**
获取指定控件及其所包含控件的值组成的对象，对象中每个值的名称为指定控件的itemId。 如果控件下存在重复itemId的控件，则只返回第一个控件值，其余重名的控件将被忽略。
**用法示例**
以下示例直接取自源码注释。
```javascript
var jsonObject1 = Wb.getValue(app.window1); //获取window1下所有控件的值组成的对象
var jsonObject2 = Wb.getValue([text1, date1]); //获取text1和date1的值组成的对象
```
**源码注释**
```javascript
/**
* 获取指定控件及其所包含控件的值组成的对象，对象中每个值的名称为指定控件的itemId。
* 如果控件下存在重复itemId的控件，则只返回第一个控件值，其余重名的控件将被忽略。
* Example:
*
* var jsonObject1 = Wb.getValue(app.window1); //获取window1下所有控件的值组成的对象
* var jsonObject2 = Wb.getValue([text1, date1]); //获取text1和date1的值组成的对象
*
* @param {Component/Component[]} components 需要获取值的组件对象或组件对象列表。
* @param {String/String[]} [itemIds] 需要获取值的组件itemId名称或名称列表，如果值为空则返回所有控件的值。
* @param {Boolean} [getFileName] 是否获取文件控件的文件名称，默认为false。
* @return {Object} 获取的控件值组成的对象。
*/
```
## Wb.getAgValue
```javascript
Wb.getAgValue(components, itemIds, getFileName);
```
源码：`wb-debug.js:1526`
**使用说明**
获取指定控件及其所包含控件的值组成的对象，对象中每个值的名称为指定控件的itemId。 如果控件下存在重复itemId的控件，则只返回第一个控件值，其余重名的控件将被忽略。
**用法示例**
以下示例直接取自源码注释。
```javascript
var jsonObject1 = Wb.getValue(app.window1); //获取window1下所有控件的值组成的对象
var jsonObject2 = Wb.getValue([text1, date1]); //获取text1和date1的值组成的对象
```
**源码注释**
```javascript
/**
* 获取指定控件及其所包含控件的值组成的对象，对象中每个值的名称为指定控件的itemId。
* 如果控件下存在重复itemId的控件，则只返回第一个控件值，其余重名的控件将被忽略。
* Example:
*
* var jsonObject1 = Wb.getValue(app.window1); //获取window1下所有控件的值组成的对象
* var jsonObject2 = Wb.getValue([text1, date1]); //获取text1和date1的值组成的对象
*
* @param {Component/Component[]} components 需要获取值的组件对象或组件对象列表。
* @param {String/String[]} [itemIds] 需要获取值的组件itemId名称或名称列表，如果值为空则返回所有控件的值。
* @param {Boolean} [getFileName] 是否获取文件控件的文件名称，默认为false。
* @return {Object} 获取的控件值组成的对象。
*/
```
## Wb.getVal
```javascript
Wb.getVal(component, itemId);
```
源码：`wb-debug.js:1579`
**使用说明**
获取某个控件下第一个指定itemId控件的值。
**用法示例**
以下示例直接取自源码注释。
```javascript
var dateValue = Wb.getVal(window1, 'date1'); //获取window1下itemId为date1的控件日期值
```
**源码注释**
```javascript
/**
* 获取某个控件下第一个指定itemId控件的值。
*
* Example:
*
* var dateValue = Wb.getVal(window1, 'date1'); //获取window1下itemId为date1的控件日期值
*
* @param {Component/Component[]} component 需要获取值的组件对象或组件对象列表。
* @param {String} [itemId] 需要返回值的控件itemId名称，如果缺省该值则返回component[0]指定的值。
* @return {Object} 获取的指定控件的值。
*/
```
## Wb.setValue
```javascript
Wb.setValue(components, values);
```
源码：`wb-debug.js:1600`
**使用说明**
对指定控件下的一组控件进行赋值，其值由values对象指定，values中的每一子项的名称为控件的itemId，值为控件值。
**用法示例**
以下示例直接取自源码注释。
```javascript
Wb.setValue(window1,{text1: 'foo', date1: new Date()});
```
**源码注释**
```javascript
/**
* 对指定控件下的一组控件进行赋值，其值由values对象指定，values中的每一子项的名称为控件的itemId，值为控件值。
*
* Example:
*
* Wb.setValue(window1,{text1: 'foo', date1: new Date()});
*
* @param {Component/Component[]} components 顶层控件对象列表，只有在指定控件下的控件值才被设置。
* @param {Object} values 包含一组控件itemId和值组成的Object对象。
*/
```
## Wb.setVal
```javascript
Wb.setVal(component, itemId, value);
```
源码：`wb-debug.js:1644`
**使用说明**
设置某个控件下指定itemId控件的值。
**用法示例**
以下示例直接取自源码注释。
```javascript
Wb.setVal(window1,'date1', new Date()); //设置window1下itemId为date1的控件值为new Date()
```
**源码注释**
```javascript
/**
* 设置某个控件下指定itemId控件的值。
*
* Example:
*
* Wb.setVal(window1,'date1', new Date()); //设置window1下itemId为date1的控件值为new Date()
*
* @param {Component/Component[]} component 顶层控件对象，只有在指定控件下的控件值才被设置。
* @param {String} itemId 需要设置值的控件itemId名称。
* @param {Object} value 需要设置的值。
*/
```
## Wb.resetScroll
```javascript
Wb.resetScroll(component);
```
源码：`wb-debug.js:1653`
**使用说明**
重置指定控件的滚动条指顶部。仅用于touch模式。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.resetScroll(app.component);
```
**源码注释**
```javascript
/**
* 重置指定控件的滚动条指顶部。仅用于touch模式。
* @param {Component} component 需要重置的组件对象。
*/
```
## Wb.reset
```javascript
Wb.reset(components, itemIds);
```
源码：`wb-debug.js:1661`
**使用说明**
重置指定控件及其所包含控件的值。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.reset(
app.components,
/* itemIds */ undefined
);
```
**源码注释**
```javascript
/**
* 重置指定控件及其所包含控件的值。
* @param {Component/Component[]} components 需要重置值的组件对象或组件对象列表。
* @param {String/String[]} itemIds 需要重置值的组件itemId名称或名称列表，如果值为null则重置所有控件的值。
*/
```
## Wb.getRefer
```javascript
Wb.getRefer(components, object);
```
源码：`wb-debug.js:1700`
**使用说明**
获取指定容器及其下每一个具有itemId属性的组件的实例引用组成的对象。 那么之前的引用将被覆盖。如果缺少该值，系统将创建新的对象来存放引用。
**用法示例**
以下示例直接取自源码注释。
```javascript
var refer = Wb.getRefer(viewport1);
Wb.info(refer.text1.getValue()); // refer.text1指向viewport1下的text1控件
```
**源码注释**
```javascript
/**
* 获取指定容器及其下每一个具有itemId属性的组件的实例引用组成的对象。
*
* Example:
*
* var refer = Wb.getRefer(viewport1);
* Wb.info(refer.text1.getValue()); // refer.text1指向viewport1下的text1控件
*
* @param {Component/Component[]} components 需要获取引用的顶层容器控件列表。
* @param {Object} [object] 被添加引用的对象，实例的引用将被添加到该对象。如果名称已经存在，
* 那么之前的引用将被覆盖。如果缺少该值，系统将创建新的对象来存放引用。
* @return {Object} 包含引用的对象。
*/
```
## Wb.highlight
```javascript
Wb.highlight(comp, warning);
```
源码：`wb-debug.js:1724`
**使用说明**
对指定组件进行高亮操作。如果未指定warning则采用默认高亮方案，否则采用红色渐变1.5秒。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.highlight(
app.comp,
true
);
```
**源码注释**
```javascript
/**
* 对指定组件进行高亮操作。如果未指定warning则采用默认高亮方案，否则采用红色渐变1.5秒。
* @param {Element/Node} comp 需要高亮的元素。
* @param {Boolean} [warning] 是否采用警告的高亮方案。
*/
```
## Wb.verifyGrid
```javascript
Wb.verifyGrid(object);
```
源码：`wb-debug.js:1758`
**使用说明**
验证可编辑表格数据是否合法。如果非法，系统将把焦点转到第一个非法的单元格。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.verifyGrid(app.object);
```
**源码注释**
```javascript
/**
* 验证可编辑表格数据是否合法。如果非法，系统将把焦点转到第一个非法的单元格。
* @param {Ext.grid.Panel/Ext.data.Store} object 表格或store对象。
* @return {Boolean} true合法，false不合法。
*/
```
## Wb.verify
```javascript
Wb.verify(components);
```
源码：`wb-debug.js:1795`
**使用说明**
对指定的控件及其子控件值的合法性进行校验。当存在非法值时，系统将对控件进行标记， 并把焦点转到第一个存在非法值的控件上。
**用法示例**
以下示例直接取自源码注释。
```javascript
if(Wb.verify(window1))
alert('window1下所有控件的值合法。');
```
**源码注释**
```javascript
/**
* 对指定的控件及其子控件值的合法性进行校验。当存在非法值时，系统将对控件进行标记，
* 并把焦点转到第一个存在非法值的控件上。
*
* Example:
*
* if(Wb.verify(window1))
* alert('window1下所有控件的值合法。');
*
* @param {Component/Component[]} components 需要验证的控件。
* @return {Boolean} 如果验证的所有控件的值合法，返回true，否则返加false。
*/
```
## Wb.isHidden
```javascript
Wb.isHidden(comp);
```
源码：`wb-debug.js:1870`
**使用说明**
从传入组件开始沿 parent 链向上检查 isHidden()；任意祖先隐藏即返回 true，否则返回 false。适合在校验前排除不可见字段。
**用法示例**
以下示例依据函数体中的实际调用关系整理。
```javascript
if (!Wb.isHidden(app.customerName)) {
app.customerName.validate();
}
```
**源码注释**
```javascript
/**
* 源码未提供 JSDoc。
*/
```
## Wb.quoteRegexp
```javascript
Wb.quoteRegexp(regexp);
```
源码：`wb-debug.js:1884`
**使用说明**
引用正则表达式，把正则表达式转换为普通的字符串。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.quoteRegexp(/* regexp */ undefined);
```
**源码注释**
```javascript
/**
* 引用正则表达式，把正则表达式转换为普通的字符串。
* @param {RegExp} regexp 正则表达式。
* @return {String} 正则表达式各个字符对应的普通字符串。
*/
```
## Wb.isValue
```javascript
Wb.isValue(value);
```
源码：`wb-debug.js:1892`
**使用说明**
判断值是否为不是null和undefined的值。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.isValue(/* value */ undefined);
```
**源码注释**
```javascript
/**
* 判断值是否为不是null和undefined的值。
* @param {Object} value 任意值。
* @return {String} 如果值为null或undefined则返回false，否则返回true。
*/
```
## Wb.getDefined
```javascript
Wb.getDefined();
```
源码：`wb-debug.js:1899`
**使用说明**
获取参数列表中首个不等于undefined的值。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.getDefined();
```
**源码注释**
```javascript
/**
* 获取参数列表中首个不等于undefined的值。
* @return {Object} 首个不等于undefined的值或undefined。
*/
```
## Wb.findEditing
```javascript
Wb.findEditing(object);
```
源码：`wb-debug.js:1914`
**使用说明**
查找表格中包含的编辑插件。如果找到则返回该插件，否则返回null。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.findEditing(app.object);
```
**源码注释**
```javascript
/**
* 查找表格中包含的编辑插件。如果找到则返回该插件，否则返回null。
* @param {Ext.grid.Panel/Ext.data.Store} object 表格或store对象。
* @return {Editing} 编辑插件或null。
*/
```
## Wb.remove
```javascript
Wb.remove(component, items, doSelect);
```
源码：`wb-debug.js:1932`
**使用说明**
删除表格中的记录、树的节点或指定的控件。如果删除的对象为表格或树，则在删除后将自动选中被删除记录的最近记录。 1component为树，删除树节点；2compnent为表格，删除表格记录；3component为树节点数据，删除数组中的所有节点； 4component为树节点数组,删除数组中的节点；5component为其他数组，删除数组中值为items的元素。 如果删除树节点且指定该项值，节点须按深度进行逆向排序（因为删除上级节点后无法删除下级节点），见Wb.reverse。
**用法示例**
以下示例直接取自源码注释。
```javascript
Wb.remove(grid1); //删除grid1中选择的记录
```
**源码注释**
```javascript
/**
* 删除表格中的记录、树的节点或指定的控件。如果删除的对象为表格或树，则在删除后将自动选中被删除记录的最近记录。
* 1component为树，删除树节点；2compnent为表格，删除表格记录；3component为树节点数据，删除数组中的所有节点；
* 4component为树节点数组,删除数组中的节点；5component为其他数组，删除数组中值为items的元素。
*
* Example:
*
* Wb.remove(grid1); //删除grid1中选择的记录
*
* @param {Component} component 需要删除子项的对象。
* @param {Array} [items] 需要删除的子项条目列表。如果删除对象为表格或树，缺省该值时将删除选中的表格记录或树节点。
* 如果删除树节点且指定该项值，节点须按深度进行逆向排序（因为删除上级节点后无法删除下级节点），见{@link #reverse}。
* @param {Boolean} [doSelect] 删除后是否选择下一个节点/记录，默认为true。
*/
```
## Wb.setModified
```javascript
Wb.setModified(panel);
```
源码：`wb-debug.js:2050`
**使用说明**
设置面板的状态为被更改，设置被更改状态将在面板的标题前加“*”符，并添加isModified属性为true。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.setModified(app.panel);
```
**源码注释**
```javascript
/**
* 设置面板的状态为被更改，设置被更改状态将在面板的标题前加“*”符，并添加isModified属性为true。
* @param {Panel} panel 面板对象。
* @return {Panel} panel 本身。
*/
```
## Wb.unModified
```javascript
Wb.unModified(panel);
```
源码：`wb-debug.js:2065`
**使用说明**
设置面板的状态为未更改，设置未更改状态将移除面板的标题前置“*”符，并设置isModified属性为false。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.unModified(app.panel);
```
**源码注释**
```javascript
/**
* 设置面板的状态为未更改，设置未更改状态将移除面板的标题前置“*”符，并设置isModified属性为false。
* @param {Panel} panel 面板对象。
* @return {Panel} panel 本身。
*/
```
## Wb.setTitle
```javascript
Wb.setTitle(panel, subTitle);
```
源码：`wb-debug.js:2080`
**使用说明**
设置面板的子标题，子标题将以“标题 - 子标题”的形式显示在面板标题上。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.setTitle(
app.panel,
/* subTitle */ undefined
);
```
**源码注释**
```javascript
/**
* 设置面板的子标题，子标题将以“标题 - 子标题”的形式显示在面板标题上。
* @param {Panel} panel 面板对象。
* @param {String} subTitle 子标题。
* @return {Panel} 面板本身。
*/
```
## Wb.parseBool
```javascript
Wb.parseBool(value, defaultValue);
```
源码：`wb-debug.js:2098`
**使用说明**
把值解析为布尔型。如果值为false, 'false', 0, '0', null, undefined和空串返回false，其他值返回true。 如果指定默认值，则当值为null或undefined时返回此默认值。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.parseBool(
/* value */ undefined,
/* defaultValue */ undefined
);
```
**源码注释**
```javascript
/**
* 把值解析为布尔型。如果值为false, 'false', 0, '0', null, undefined和空串返回false，其他值返回true。
* 如果指定默认值，则当值为null或undefined时返回此默认值。
* @param {Object} value 需要解析的值。
* @return {Boolean} 解析后的布尔值。
*/
```
## Wb.getBool
```javascript
Wb.getBool(value, defaultValue);
```
源码：`wb-debug.js:2115`
**使用说明**
判定指定值语义是否为真。如果值为undefined，则返回默认值。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.getBool(
/* value */ undefined,
/* defaultValue */ undefined
);
```
**源码注释**
```javascript
/**
* 判定指定值语义是否为真。如果值为undefined，则返回默认值。
* @param {Mixed} value 需要判断的值。
* @param {Mixed} [defaultValue] 默认值，默认为false。
* @return {Boolean} true为真，false为假。
*/
```
## Wb.reload
```javascript
Wb.reload(component, object, params);
```
源码：`wb-debug.js:2126`
**使用说明**
重新加载树或表格。树：加载完成后重新选择最后选择的节点。表格或Ext.data.Store：不同于store.reload，使用该方法会叠加params指定参数。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.reload(
app.component,
app.object,
{ /* 参数或数据 */ }
);
```
**源码注释**
```javascript
/**
* 重新加载树或表格。树：加载完成后重新选择最后选择的节点。表格或Ext.data.Store：不同于store.reload，使用该方法会叠加params指定参数。
* @param {GridPanel/TreePanel/Store} component 表格、树或其绑定的Store对象。
* @param {Function/Object} [object] 树：加载完成后执行的回调函数。表格：参数对象，同store.reload的options参数。
* @param {Object} [params] 树：可选的参数对象。
* @param {Object} [params.field] 刷新树时保存路径使用的字段名称，默认为displayField。
* @param {Object} [params.separator] 刷新树时保存路径使用的分隔符，默认为'\n'。
*/
```
## Wb.verifyName
```javascript
Wb.verifyName(name);
```
源码：`wb-debug.js:2159`
**使用说明**
验证名称的合法性。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.verifyName("示例值");
```
**源码注释**
```javascript
/**
* 验证名称的合法性。
* @param {String} name 需要被验证的字符串对象。
* @return {Boolean} 如果名称由字母、下划线和数字构成且第一个字母不为数字则返回true，否则返回false。
*/
```
## Wb.verifyFile
```javascript
Wb.verifyFile(name);
```
源码：`wb-debug.js:2173`
**使用说明**
验证文件名称的合法性。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.verifyFile("示例值");
```
**源码注释**
```javascript
/**
* 验证文件名称的合法性。
* @param {String} name 需要被验证的文件名称。
* @return {Boolean} 如果名称是一个有效的文件名称则返回true，否则返回false。
*/
```
## Wb.htmlRender
```javascript
Wb.htmlRender(v);
```
源码：`wb-debug.js:2183`
**使用说明**
直接将值转交给 Wb.htmlEncode(v) 返回。当前 Wb 对象内未定义同名公开方法，调用前应确认运行环境已注入 htmlEncode，否则会发生运行时错误。
**用法示例**
以下示例依据函数体中的实际调用关系整理。
```javascript
var safeHtml = Wb.htmlRender("文本");
```
**源码注释**
```javascript
/**
* 源码未提供 JSDoc。
*/
```
## Wb.getDoc
```javascript
Wb.getDoc(iframe);
```
源码：`wb-debug.js:2191`
**使用说明**
获取iframe的文档对象。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.getDoc(app.iframe);
```
**源码注释**
```javascript
/**
* 获取iframe的文档对象。
* @param {Iframe} iframe Iframe对象。
* @return {Document} Iframe的document对象，如果获取过程发生异常将返回null。
*/
```
## Wb.relayEvent
```javascript
Wb.relayEvent(event);
```
源码：`wb-debug.js:2201`
**使用说明**
把Iframe中的事件传递到父窗口。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.relayEvent(/* event */ undefined);
```
**源码注释**
```javascript
/**
* 把Iframe中的事件传递到父窗口。
*/
```
## Wb.insertIframe
```javascript
Wb.insertIframe(owner, useMask);
```
源码：`wb-debug.js:2226`
**使用说明**
在指定的控件中插入iframe，插入的iframe具有自动显示加载进度，自动释放资源，并管理全局点击事件的功能。 管理全局点击事件是指iframe和其上层窗体之间的点击事件管理，比如当上层窗口显示菜单时，点击iframe能隐藏上层窗口的菜单。 插入的iframe提供submit(url, params, method)方法，用于向指定url提交参数并显示在iframe中，示例：\
owner.iframe.submit('m?xwl=name', \{p1: 'foo', p2: 'bar'\}); //POST方法\
owner.iframe.submit('m', \{xwl:'name', p1: 'foo', p2: 'bar'\}, 'GET');//GET方法\
如果要获取dom，可通过iframe.dom获取iframe dom。
**用法示例**
以下为最小调用模板；请将 `app.*`、示例值和地址替换为当前页面的实际对象。
```javascript
Wb.insertIframe(
app.owner,
true
);
```
**源码注释**
```javascript
/**
* 在指定的控件中插入iframe，插入的iframe具有自动显示加载进度，自动释放资源，并管理全局点击事件的功能。
* 管理全局点击事件是指iframe和其上层窗体之间的点击事件管理，比如当上层窗口显示菜单时，点击iframe能隐藏上层窗口的菜单。
* 插入的iframe提供submit(url, params, method)方法，用于向指定url提交参数并显示在iframe中，示例：
* owner.iframe.submit('m?xwl=name', {p1: 'foo', p2: 'bar'}); //POST方法
* owner.iframe.submit('m', {xwl:'name', p1: 'foo', p2: 'bar'}, 'GET');//GET方法
* @param {Component} owner 需要被插入iframe的控件。
* @param {Component} useMask 指定在加载过程中是否需要使用mask，默认为true。
* @return {Element} 插入的iframe Element，也可通过owner.iframe获取iframe element。
* 如果要获取dom，可通过iframe.dom获取iframe dom。
*/
```
Source: https://ag.879818327.xyz/api/forms-and-components/index.mdx