WebBulider的一些常用变量和控件的个人见解（有可能不准，不要当成文档看）

module控件下有个finalize可以写app.finBtn.fireEvent('click');
代表着查询被单击，这样store控件就不用给autoLoad 设置为true。


store 用来调用对应的操作数据的url和params使用来发送参数,autoLoad自动加载，不建议使用影响效率。


fieldset控件：用来美化界面的，或者说用来给总体的内容加上一个标签栏名字，用来规范一定范围中的内容。


tab控件： tabPosition这个是用来吧tab控件下的用来切换panel控件的切换按钮放到下面去。


comp控件，用来写对应合法的html代码块，


allowBlank属性：false/true 这个属性都是为空。


popupMenu控件，下面跟上item下面就是下俩菜单


viewport视口控件：视图默认显示的窗口，通常他的layout布局会被设置成fit用来自适应。panel1他是一个对应包装的控件。


textarea控件：多行文本控件。


array控件 默认要把itemId改成columns这样下面才能放置column控件


selType属性有个checkboxmodel值，代表前面加一列多选框


toolbar控件，用来添加多个查询的条件的。


keyName属性代表了是从数据字典中的获取到的值。


grid1控件是表格控件，他下面的itemdbclick是双击事件，itemclick是单击事件。


combo控件，有个displayField属性，是数据库的字段，默认是显示的内容，
还有个valueField 代表他的对应记录的字段，一般都是display设置为name，valueField
设置为ID。BindField属性功能：使该控件的取值绑定的字段的名称。绑定之后将在所在容器中创建隐藏的控件，其值关联bindField指定字段的值。当取容器的值时，比如使用Wb.getValue(app.panel1)取值时，除获取该控件值外，还可获得bindField指定字段的值。设置该属性也使控件的值输入或选择必须存在于下拉列表中。当下拉框需要绑定store从远程取数，并且数据存在显示文本和值的对应关系时，可以通过设置此属性来实现。该属性区别于valueField。


file是一个文件控件，他们都在这个控件上写上了allowBlank值为false的属性


check多选框，tagConfigs属性可以这样写：
{
  getValue: function() {
    if (this.value==true||this.value=='1') {
      return 1;
    } else {
      return 0;
    }
  }
}用来确定如果被选中值为1,没有咋为0






hidden属性代表这是否隐藏true代表隐藏


column控件 有dataIndex代表数据库的对应的字段名字（别名优先）
xtype 属性有个rownumberer值，代表当前的行数
column控件下可以添加一个text文本框用来修改内容
column的titleAlign是列名的对齐，而列的内容的对齐属性是align


text控件，是文本框，有个readOnly只读的选项可以设置为true或者false，fieldLaber属性：是前面的自带的标签为主键


fieldLadel属性是标签名字通常会配合laberAlign:right 来使用
editale 属性是否可以编辑表格 true & false;不对，好像不是这么回事


window控件默认在module下，上来不会显示，他的dialog属性设置为true就代表着：他有
确定和取消两个按钮。默认布局layout设置为fit;然后他下面的layout设置为absolute


查询的方法
app.grid1.store.load({
  out:app.tbar//注意这里不要加分号！！！原因不知道
});
对应的查询module(模块)的serverScript(脚本服务器)代码如下：
var data = app.get(),sql='';
if(!Wb.isEmpty(data.name)){
  sql += " and grade_nam like '%'||{?name?}||'%' ";
}
request.setAttribute('sql',sql);
module控件的子控件是dataorivuder1
select ID,GRADE_COD,GRADE_NAM,CREATED_BY,CREATED_ON,UPDATED_BY,UPDATED_ON 
 from  T_GRADE
where 1=1 {#sql#}
前一个使用来添加模糊查询的条件，后一个用来进行查询，并且判断有没有模糊查询的
条件存在。


修改事件，先改修表格，然后需要保存后才能生效
Wb.addEdit(app.grid1,
           {ID:Wb.getUuid(), CREATED_BY:'{#sys.username#}',CREATED_ON:new Date(),
            UPDATED_BY:'{#sys.username#}',UPDATED_ON:new Date()},'last',1,false);




删除的单击事件


var recs = app.grid1.getSelection();
if(recs.length === 0){
  Wb.warn('请选择至少一条记录');
  return;
}
Wb.remove(app.grid1);


复制一条记录
var  rec = app.grid1.getSelection()[0];
if(!rec){
  Wb.warn('请选择一条记录');
  return;
}
rec.data.ID = Wb.getUuid();
rec.data.columnsName='{#sys.username#}';//获取当前登录账户的名字
rec.data.columnsName2 = new Date(),
rec.data.columnsName3 = '{#sys.username#}';
rec.data.columnsName4 = new Date();
Wb.addEdit(app.grid1,rec.data,'last',1,false);






保存的单击事件
if (!Wb.verifyGrid(app.grid1)) //判断数据是否合法
  return;
Wb.requestAg({ //这个是WebBulider自带的请求方法
  params: {//发送参数
    datatable: [Wb.getModified(app.grid1)],//发送改变后的表格这里有点蒙
    className: "com.ag.web.agDemo.pojo.TGrade",
    bean: "comBean",
    insertSql: "resources/agDemo.TGradeMapper.insert",
    deleteSql: "resources/agDemo.TGradeMapper.deleteByPrimaryKey",
    updateSql: "resources/agDemo.TGradeMapper.updateByPrimaryKeySelective",
    method: "saveGrid" //业务方法名 
  },
  success: function(resp) {
    app.findBtn.fireEvent('click');
    Wb.tip('保存成功');
  }
});


路径地址是src下的main为主路径目录


不对，他的对饮的方法是调用的springmvc下的Mapping.xml方法




第二中添加的方法，不需要点保存直接生效的
var win = new Ext.window.Window(app._Win); //app._win指向配置对象而非实例
win.show();
win.setIconCls('record_add_icon');
Wb.setTitle(win, '添加');
//窗口每次动态生成,方法在窗口销毁时自动销毁
win.mon(win, 'ok', function() {
  Wb.requestAg({
    params: {
      tRelationData: Wb.getValue([win,app.tbar]),
      bean: "TRelationController",
      method: "saveMethod" //业务方法名 
    },
    success: function(resp) {
      win.close();
      app.findBtn.fireEvent('click');
      Wb.tip('新增成功');
    }
  });
});


第二种修改的方法，一样不需要点保存才能生效：
var recs = app.grid1.getSelection();//这个是获取所有被选中的记录
if(recs.length !=1){
  Wb.warn('请选择一条记录');
  return;
}
var win = new Ext.window.Window(app._Win); //app._win指向配置对象而非实例
win.show();
win.setIconCls('record_edit_icon');
Wb.setTitle(win, '修改');
Wb.setValue(win,recs[0].data);
//窗口每次动态生成,方法在窗口销毁时自动销毁
win.mon(win, 'ok', function() {
  Wb.requestAg({
    params: {
      tRelationData: Wb.getValue([win,app.tbar]),
      bean: "TRelationController",
      method: "saveMethod" //业务方法名 
    },
    success: function(resp) {
      win.close();
      app.findBtn.fireEvent('click');
      Wb.tip('修改成功');
    }
  });
});


第二种删除的方法，不需要保存就能直接生效。


var rows = app.grid1.getSelection(),ids='-';
if(rows.length == 0){
  Wb.warn('请选择至少一条记录');
  return;
}
Wb.each(rows,function(row){
  ids+=row.data.ID+"-";
});
Wb.confirm('确定要删除姓名为' + rows.length + ' 条记录吗？', function() {
  Wb.requestAg({
    params: {
      ids:ids,
      bean: "TRelationController",
      method: "delTRelation" //业务方法名 
    },
    success: function(resp) {
      app.findBtn.fireEvent('click');
      Wb.tip('删除成功');
    }
  });
});




把webBuilder的数据导出到excel表格
使用控件button 设置属性：iconCls为db_export_icon ，click下的代码：
var rows = app.grid1.getSelection();
if(rows.length == 0){
  Wb.warn('请选择一条记录');
  return;
}


console.log(rows);
var ids = '';
Wb.each(rows,function(row){
  ids += row.data.ID+',';
});


Wb.request({
  url: 'm?xwl=agDemo/studentData/expPoiExcel', 
  params:{ids:ids},
  success: function(resp) {
    Wb.tip('生成excel成功');
  }
});
exPoiExcel程序下有个module控件设置的serverMethod值为com.ag.web.agDemo.domain.TStudentController.expPoiExcel
这里的路径实际上代表这是一个路径：项目名/CrmWebSysteam/src/main/java/
com/ag/web/agDemo/domain/TStudentController类下的expPoiExcel方法


public static void expPoiExcel(HttpServletRequest request, HttpServletResponse response){
        String ids = request.getParameter("ids");
        TStudentDao tStudentDao = (TStudentDao) SpringApplicationContext.getBean("TStudentDao");
        if(TGradeNameToCod.dataMap.get("cod") == null) {
            TGradeDao tGradeDao = (TGradeDao) SpringApplicationContext.getBean("TGradeDao");
            TGradeNameToCod.dataMap.put("cod", tGradeDao.getGrade());
        }
        List  list = tStudentDao.selectStudent(ids);
        List data = new ArrayList();
        if (list !=null && list.size()>0){
            for (int i=0; list !=null && i<list.size();i++){
                TStudent tStudent = (TStudent) list.get(i);
                List slist = new ArrayList();
                slist.add(tStudent.getName());
                slist.add(tStudent.getSex());
                slist.add(tStudent.getAge());
                slist.add(TGradeNameToCod.transName(tStudent.getGradeCod()));
                data.add(slist);
            }
        }
        try {
            String path = AgCommonUtil.getPath()+"excel/student/expExcel/";
            String isFilePath = path + "student.xls";
            String osFilePath = path+"s" + System.currentTimeMillis() + ".xls";
            ExpPoiSimExcel.expExcel(data,isFilePath,osFilePath);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
AgCommonUtil.getPath()的源代码：
 public static String  getPath(){
         String str = AgCommonUtil.class.getResource("/").getPath();
         String basicPath = str.substring(0,str.indexOf("target"));
         String   path = basicPath + "target/NeptuneArtifact/wb/document/";
         return  path;
    }
先把源代码放在这里回头细细研究。




excel文件上传技术
首先还是button控件起手,然后他的click事件源代码：
var win = new Ext.window.Window(app._fileWin); //指向配置对象而非实例
win.show();iconCls属性的值为：db_import_icon 
对应的fileWin窗口控件：属性设置:closaAction:destroy,dialog:true,layout:absolute
click：
if (!Wb.verify(app.form1)) //验证值是否合法
  return;
Wb.upload({
  form: app.form1, //上传的表单控件，必选项
  showProgress: true, //显示上传进度条
  url: 'm?xwl=agDemo/studentData/impExcel',
  //上传成功之后的回调方法
  success: function(form, action, value) {
    app.grid1.store.load();
    app.fileWin.close();
  }
});
impExcel程序下：moduled的serverEmthod:com.ag.web.agDemo.domain.TStudentController.impExcel
java源代码：
public static void importExcelStream(InputStream stream,HttpServletRequest request, HttpServletResponse response) throws Exception {
        List data = ImpExcel.readExcelBody(stream, 2, -1, 0, -1, 0);
        if (data == null || data.size() == 0) {
            return;
        }
        TStudentDao tStudentDao = (TStudentDao) SpringApplicationContext.getBean("TStudentDao");
        if(TGradeNameToCod.dataMap.get("cod") == null) {
            TGradeDao tGradeDao = (TGradeDao) SpringApplicationContext.getBean("TGradeDao");
            TGradeNameToCod.dataMap.put("cod", tGradeDao.getGrade());
        }
        for(int i=0;data !=null && i<data.size();i++){
            Map map = (Map) data.get(i);
            TStudent tStudent = new TStudent();
            tStudent.setId(SysUtil.getId());
            tStudent.setName((String) map.get(0));
            tStudent.setSex((String) map.get(1));
            short age = Short.parseShort(map.get(2).toString());
            tStudent.setAge(age);
            tStudent.setGradeCod(TGradeNameToCod.transCod((String) map.get(3)));
            String username = (String) request.getSession().getAttribute("sys.username");
            tStudent.setCreatedBy(username);
            tStudent.setCreatedOn(WbUtil.getNowDate());
            tStudent.setUpdatedBy(username);
            tStudent.setUpdatedOn(WbUtil.getNowDate());
            tStudentDao.insert(tStudent);
        }
    }
SpringApplicationContext.getBean源代码：


public class SpringApplicationContext implements ApplicationContextAware {


    private static ApplicationContext appContext;


    // Private constructor prevents instantiation from other classes
    private SpringApplicationContext() {}




    public void setApplicationContext(ApplicationContext applicationContext)
            throws BeansException {
        appContext = applicationContext;


    }


    public static Object getBean(String beanName) {
        return appContext.getBean(beanName);
    }


}


BeanFactory部分源代码：
public interface BeanFactory {
    String FACTORY_BEAN_PREFIX = "&";


    Object getBean(String var1) throws BeansException;
}


第三种：增加的方法也需要保存事件，否则不会生效。
Wb.reset(app.panel2);


第三种：修改的方法，需要保存事件。
var rec = app.grid1.getSelection()[0];
if(!rec){
  Wb.warn('请选择一条记录');
  return;
}
Wb.setValue(app.panel2,rec.data);


第二种保存的方法：
if (!Wb.verify(app.panel2)) 
  return;
Wb.requestAg({
  params: {
    tTeacherData: Wb.getValue(app.panel2),
    bean: "TTeacherController",
    method: "saveMethod" //业务方法名 
  },
  success: function(resp) {
    var data = Wb.decode(resp.responseText);
    app.findBtn.fireEvent('click');
    Wb.setValue(app.panel2,data[0]);
    Wb.tip('保存成功');
  }
});




导出word文档的源代码：
public static void expPoiWord(HttpServletRequest request, HttpServletResponse response) throws Exception {
        TTeacher tTeacher = JSON.parseObject(request.getParameter("tTeacherData"),TTeacher.class);
        Map<String, Object> params = new HashMap();
        params.put("${time}", DateUtil.format(tTeacher.getCreatedOn(),"yyyy-MM-dd"));
        params.put("${name}",tTeacher.getName());
        params.put("${sex}",tTeacher.getSex());
        params.put("${title}",tTeacher.getTitle());
        params.put("${subjectCod}",tTeacher.getSubjectCod());
        String path = AgCommonUtil.getPath()+"word/teacher/expWord/";
        String inFilePath = path+"teacher.docx";
        InputStream is = new FileInputStream(inFilePath);
        XWPFDocument doc = new XWPFDocument(is);
        ExpPoiSimWord expPoiSimWord = new ExpPoiSimWord();
        //替换段落里面的变量
        expPoiSimWord.replaceInPara(doc,params);
        //替换表格里面的变量
        expPoiSimWord.replaceInTable(doc,params);
        String osFilePath = path+"t"+System.currentTimeMillis()+".docx";
        OutputStream os = new FileOutputStream(osFilePath);
        doc.write(os);
        expPoiSimWord.close(os);
        expPoiSimWord.close(is);
    }    


上传word的源代码：
public static void impWord(HttpServletRequest request,HttpServletResponse response) throws Exception {
        InputStream is = (InputStream) request.getAttribute("file");
        InputStream input = (InputStream) request.getAttribute("file");
        String filename = (String) request.getAttribute("filename");
        if (filename == null)
            filename = (String) request.getAttribute("file__name");
        //相应的数据解析读取
        ImpWord impWord = new ImpWord();
        List data = impWord.processWord(is,filename);
        String username = (String) request.getSession().getAttribute("sys.username");
        TTeacher  tTeacher = new TTeacher();
        tTeacher.setId(SysUtil.getId());
        tTeacher.setName((String) data.get(1));
        tTeacher.setSex((String) data.get(3));
        tTeacher.setTitle((String) data.get(5));
        tTeacher.setSubjectCod((String) data.get(7));
        tTeacher.setCreatedBy(username);
        tTeacher.setCreatedOn(WbUtil.getNowDate());
        tTeacher.setUpdatedBy(username);
        tTeacher.setUpdatedOn(WbUtil.getNowDate());
        TTeacherDao teacherDao = (TTeacherDao) SpringApplicationContext.getBean("TTeacherDao");
        teacherDao.insert(tTeacher);
        //生成word文档保存
        String path = AgCommonUtil.getPath()+"word/teacher/impWord/";
        String osFilePath = path+"t"+System.currentTimeMillis()+".doc";
        FileOutputStream out = new FileOutputStream(osFilePath);
        byte buffer[] = new byte[1024];
        int len = 0;
        while ((len = input.read(buffer)) != -1) {
            out.write(buffer, 0, len);
        }
        out.close();
        WebUtil.send(response,true);
    }
他们都是一个button控件，然后调用一个url连接到对应的expPoiWord中，


GIT提交的3布：
提交，拉取，推送