---
title: "常用开发指南"
description: "WebBuilder 页面、组件和 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.

# 常用开发指南

## 输入框 按钮

### 数字输入框

``` javascript
//保留几位小数
decimalPrecision
//最大最小值
minValue
maxValue
```

### 规范使用Item代替button

```
//部分Item显示不正确并且不能点击触发事件
   xtype设置为button
```

### 防止按钮重复点击

> **Note**
>
> 在按钮的click事件最后部分加上以下代码块，可以防止因重复快速点击造成数据库数据重复等问题

```javascript
Wb.setDisabled([app.add],true);
if (app.add.disabled) {
   setTimeout(function () { Wb.setDisabled([app.add],false); }, 2000);
}
```

### 键盘事件监听

```javascript
app.textItemId.addListener("specialkey", function(field, e) {
  if (e.getKey() == e.ENTER) {//具体的逻辑
app.findBtn.fireEvent('click');
  }
});
```



## 布局(border)

``` javascript
region注意必须有一个center
只能有一个不设置width 或 height
```

## panel(面板)

### 获取panel中各组件的值

``` javascript
Wb.getValue(app.xxx);//整体取值
app.ItemXXX.getValue();//单独取值
```

### panel中的各组赋值

``` javascript
Wb.setValue(app.itemIdXXX,data);//整体赋值,xxx组件itemid需要与data中key值名相同
app.itemIdXXX.setValue("aaa");//单独赋值
```

### panel展开和折叠

``` javascript
//在panel中设置collapsible中设置为true 
//collapsed设置为true则默认渲染组件为折叠状态
//若要在事件中折叠面板则使用
app.xxx.collapse();
//展开面板
app.xxx.expand();
```

## 标签页(TAB)

![Pasted image 20230208115403](https://fjtc-1256213302.cos.ap-nanjing.myqcloud.com/Pasted%20image%2020230208115403.png)
**方法打开tab页**
```javascript
app.tabP2.show();
```
### 布局间的扩展拖动

***split属性改为true***

## 常用Wb方法

### 判断是否选择grid

```javascript
var rec = app.gridInv.getSelection();
if (Wb.isEmpty(rec[0])) {
  Wb.warn("请至少选择一条发票记录");
  return;
}
```

### Wb全局变量

```
很多时候我们需要记录一个变量的值 可以在其他页面使用，经常会用到全局变量
 app.变量名 =记录值;
例如 app.user = "admin";
```

### 重置

```javascript
Wb.reset(app.itemIdXXX);
```

### 确认

``` javascript
Wb.confirm("确认要审核通过吗?", function() {
  });
```

### 请求

``` javascript
// 后台请求  
Wb.requestAg({
params: {
  id: [gridData[0].data.FEE_BILL_ID], //传到后台数据
  taskId: TASK_ID,
  bean: "FeeBillController", //controller类名
  method: "checkAndCompleteMethod" //业务方法名 
},
async:false, //是否异步请求
success: function(res) {
  //var data = Wb.decode(resp.responseText);
  app.findBtn.fireEvent('click'); //刷新页面
  //Wb.setValue(app.panel2,data[0]);
  Wb.tip('保存成功');
}
  });
//前台请求
Wb.request({
url:"",
params:{

},
out:"",
success: function(res) {

}
});
//字符串转json
var data = Wb.decode(res);
res.message
```

### 获得表格数据

``` javascript
Wb.getData(app.grid);
```

### 获得元素值

``` javascript
Wb.getValue();//一组
Wb.getVal();//单个
//extjs同效果
app.xxx.getValue();
```

### 窗口Window

```javascript
var win = new Ext.window.Window(app._xxx);
Wb.setTitle(win, '添加');
win.setIconCls('record_add_icon');
win.show();
//注意窗口Configs closeAction要使用destroy销毁

//窗口每次动态生成,方法在窗口销毁时自动销毁
win.mon(win, 'ok', function() {
  Wb.requestAg({
 params:{
   tTeacherData: Wb.getValue(win),//数据
   bean: "TTeacherController",//controller类名
   method: "saveMethod" //业务方法名 
 },
success:function(res){
  win.close();
  app.findBtn.fireEvent('click');//刷新页面
  Wb.tip('保存成功');
}
  });
});
```

### 页面初始化时间

``` javascript
var newDate = new Date();
var beg = new Date(newDate.getTime() - 30 * 24 * 60 * 60 * 1000);
var last = new Date(newDate.getTime() + 24 * 60 * 60 * 1000);
app.startDate.setValue(beg);
app.endDate.setValue(last);
```

### 控件的不可用、只读属性设置

```javascript
app.addPettyBtn.setDisabled(true);//设置不可用
app.addPettyBtn.setDisabled(false);//设置可用
// 多个控件时
Wb.setDisabled([app.addPettyBtn,app.savePettyBtn,app.delPettyBtn],true);//设置不可用
Wb.setDisabled([app.addPettyBtn,app.savePettyBtn,app.delPettyBtn],false);//设置可用

app.addPettyBtn.setReadOnly(true);//设置只读
app.addPettyBtn.setReadOnly(false);//设置非只读
// 多个控件时
Wb.setReadOnly([app.addPettyPanel,app.savePettyPanel,app.delPettyPanel],true);//设置只读
Wb.setReadOnly([app.addPettyPanel,app.savePettyPanel,app.delPettyPanel],false);//设置非只读
```

### 提示框

```javascript
//提示确认对话框
Wb.confirm('确定要审核这' + res.length + ' 条记录吗？', function() { });
//成功提示
Wb.tip();
//警告提示
Wb.warn();
```

### 数据验证

```javascript
//可编辑表格的非空验证
if(!Wb.verifyGrid(app.gridWhTally)){
 return;
}

//普通panel的非空验证
if(!Wb.verify(app.panelTeacher)){
 return;
}
```

### 修改控件前的标题

~~~js
app.xxx.setFieldLabel()
~~~



## 子页面(引用页面)

![image-20210107151014988](/webbulider/image-20210107151014988.png)

``` javascript
//父页面调用子页面方法
app.xxx(xwl名).searchItem.fireEvent('click');
//子页面调用父页面方法
app.contextOwner.searchItem.fireEvent('click');

```

```javascript
Wb.run({
url: url,
contextOwner: app,
success: function(appOld) {
  app.detailPanel = new Ext.Panel(appOld.dataPanel);
  Wb.setTextLimitSecondP('/onlineBooking/bookingDataPanelOne', appOld.dataPanel, rec.data.LINE_ID);
  app.detailPanel.setTitle('详细信息');
  app.tab.add(app.detailPanel);
  app.tab.setActiveTab(app.detailPanel);
  details(appOld);
}
  });
```



### 动态寻找父控件、同级

```javascript
findParentByType('panel')//寻找父控件
nextNode()//同级下一个控件
queryById("type");控件名为type的第一个控件
```

## 不常用wb方法

### 动态创建控件

```javascript
new Ext.form.TextField({
  appScope: app,
  xtype: "textfield",
  itemId: 'text1',
  fieldLabel: '测试标签',
  allowBlank: false,
  labelAlign: "right",
  labelWidth: 120,
  maxLength: 16
})
```



***第二种方法(推荐)***

![image-20210308165506088](/webbulider/image-20210308165506088.png)

```javascript
Wb.run({
url: url,
contextOwner: app,
success: function(appOld) {
  app.detailPanel = new Ext.Panel(appOld.dataPanel);
  Wb.setTextLimitSecondP('/onlineBooking/bookingDataPanelOne', appOld.dataPanel, rec.data.LINE_ID);//某设置必填方法
  app.detailPanel.setTitle('详细信息');
  app.tab.add(app.detailPanel);
  app.tab.setActiveTab(app.detailPanel);
  details(appOld);//另外的方法进行设值
}
  });
```



### 定时刷新

```javascript
Wb.rload = function(){
app.grid1.store.reload();
};
Wb.setint = window.setInterval('Wb.rload()',30000);
```

### 控件的显示和隐藏

```javascript
app.toolbar5.show();//显示
app.toolbar6.hide();//隐藏
```

### 页面跳转

```javascript
var pageLink = {
  url: 'm?xwl=agDemo/teacher',
  title: 'teacher',
  iconCls: 'web_icon',
  inframe: true,
  reload:true,
  newTab:false,
  params: {
teacherId:rec.data.TEACHER_ID
  }
};
Wb.open(pageLink);

目标页面参数：
app.teacherId= '{#teacherId#}';
```

### 系统首页html连接如何打开菜单，以标签页形式显示

```javascript
Wb.open({
   url: url,
   title: titleName
});
```

### 将组件动态加到panel中

```javascript
//动态调取xwl
Wb.run({
  url:'m?xwl=EDIManage/2',
params:{
    data:xxx
}
  success: function(scope) {
app.panel2.add(scope.panel1);//把otherModule的panel1添加到本模块的panel1中
  }
});
//子页面初始化
var data = '{#data#}';
```

## 判断字符

### 中文

```javascript
,
  checkHz: function(str) {
var pattern = /^[A-Za-z0-9-\.!@#\$%\\\^&\*\)\(\+=\{\}\[\]\/",'<>~\·`\?:;|]+$/;
return pattern.test(str);
  }
//返回值0为无汉字
//仅中文,判断有无
if(newValue!=''&&!app.checkHz(newValue)){
  Wb.warn("不可包含中文");
  textarea.setValue('');
}
```

### 判断数字

```js
if (value != null && value != "") {
  var myreg = /^[1-9](\.[0-9])?$/g;
  if (myreg.test(value)) {
return true;
  } else {
return '请输入1-9';
  }
} else {
  return true;
}
```



## 对于数据setValue与页面加载存在先后问题

```javascript
if (app.panelCold !== undefined && app.pannelDanger !== undefined && app.panelLargeCargo !== undefined) {
}
```

## RadioGroup实现

```js
{
  getValue: function() {
var vals = Wb.getValue(this, ['dateTypeEtd', 'dateTypeCt']);
if (vals.dateTypeEtd)
  return '1';
if (vals.dateTypeCt)
  return '2';
  },
  setValue: function(v) {
Wb.setValue(this, {
  radion: v == '1',
  radiow: v == '2',
});
  }
}
```



### js excel导入

***finalize***

```javascript
Wb.setTextLimitSecondP('/onlineBooking/BillDataPanel',app.dataPanel);

//导入excel

var wb; //读取完成的数据
var rABS = false; //是否将文件读取为二进制字符串
function importf(obj) { //导入
  if (obj.files.length == 0) {
return;
  }
  var f = obj.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
var data = e.target.result;
if (rABS) {
  wb = XLSX.read(btoa(fixdata(data)), { //手动转化
    type: 'base64'
  });
} else {
  wb = XLSX.read(data, {
    type: 'binary'
  });
}
//wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
//wb.Sheets[Sheet名]获取第一个Sheet的数据
var excel = Wb.decode(JSON.stringify(XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])));
//     console.log(excel[0]['箱号']);
setCntr(excel);
  };
  if (rABS) {
reader.readAsArrayBuffer(f);
  } else {
reader.readAsBinaryString(f);
  }
}

function fixdata(data) { //文件流转BinaryString
  var o = "",
l = 0,
w = 10240;
  for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
  return o;
}

function setCntr(data) {
  Wb.each(data, function(item, index) {
Wb.add(app.cntrGrid, {
  ID: Wb.getUuid(),
  CNTR: item['箱号'],
  TYPE_COD: item['箱型'],
  SIZE_COD: item['尺寸'],
  SEAL_NO: item['铅封号'],
  PIECES: item['件数'],
  WEIGHT: item['毛重'],
  VOLUME: item['体积'],
  SOC_FLAG: '0',
  BILL_ID: app.ID.getValue(),
  CREATED_BY: '{#sys.username#}',
  CREATED_ON: new Date(),
  UPDATED_BY: '{#sys.username#}',
  UPDATED_ON: new Date()
}, "last", 1, false);
  });
}
```

***按钮***

```javascript
importf(app.fileCntrImport.fileInputEl.$cache.el.dom);
```

***home页面(WebBuilder)***

```html
<script  src="wb/script/xlsx.full.min.js"></script>
```

[git链接](https://github.com/sheetjs/sheetjs)


### 强制选择forceSelection
```javascript
//blur(仅能控制页面输入)
var value = combo.getValue();
if(!Wb.isEmpty(value)){
  var comboList= Wb.getData(combo.store);
  var exist = false;
  for(var i in comboList){
if(comboList[i].ID===value){
  exist=true;
  break;
}
  }
  if(!exist){
combo.setValue("");
  }
}
```

Source: https://ag.879818327.xyz/webbuilder/readme/index.mdx