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布：
提交，拉取，推送