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布:
提交,拉取,推送