常用开发指南

输入框按钮

数字输入框

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

规范使用Item代替button

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

防止按钮重复点击

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

键盘事件监听

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

布局(border)

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

panel(面板)

获取panel中各组件的值

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

panel中的各组赋值

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

panel展开和折叠

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

标签页(TAB)

Pasted image 20230208115403 方法打开tab页

app.tabP2.show();

布局间的扩展拖动

split属性改为true

常用Wb方法

判断是否选择grid

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

Wb全局变量

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

重置

Wb.reset(app.itemIdXXX);

确认

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

请求

// 后台请求  
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

获得表格数据

Wb.getData(app.grid);

获得元素值

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

窗口Window

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('保存成功');
    }
  });
});

页面初始化时间

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);

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

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);//设置非只读

提示框

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

数据验证

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

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

修改控件前的标题

app.xxx.setFieldLabel()

子页面(引用页面)

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

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);
    }
  });

动态寻找父控件、同级

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

不常用wb方法

动态创建控件

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

第二种方法(推荐)

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);//另外的方法进行设值
    }
  });

定时刷新

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

控件的显示和隐藏

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

页面跳转

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连接如何打开菜单，以标签页形式显示

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

将组件动态加到panel中

//动态调取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#}';

判断字符

中文

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

判断数字

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与页面加载存在先后问题

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

RadioGroup实现

{
  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

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);
  });
}

按钮

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

home页面(WebBuilder)

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

git链接

强制选择forceSelection

//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("");
  }
}

输入框 按钮

数字输入框

规范使用Item代替button

防止按钮重复点击

键盘事件监听

布局(border)

panel(面板)

获取panel中各组件的值

panel中的各组赋值

panel展开和折叠

标签页(TAB)

布局间的扩展拖动

常用Wb方法

判断是否选择grid

Wb全局变量

重置

确认

请求

获得表格数据

获得元素值

窗口Window

页面初始化时间

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

提示框

数据验证

修改控件前的标题

子页面(引用页面)

动态寻找父控件、同级

不常用wb方法

动态创建控件

定时刷新

控件的显示和隐藏

页面跳转

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

将组件动态加到panel中

判断字符

中文

判断数字

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

RadioGroup实现

js excel导入

强制选择forceSelection

输入框按钮