FormPanel,EditorGridPanel的赋值和传参、数据的保存删除
首先,需要注意几个问题:
1.我们最常用的Store都是用于Grid取值,用columnModel中的dataIndex关联Store的fields。
2.Formpanel数据源和Grid相同,一般使用以下两种方式赋值:
(1).getForm().findField("name").setValue("") —— 此处用name赋值
var addForm = new Ext.FormPanel({ frame: true, labelWidth: 80, //labelAlign: "right", //buttonAlign:"center", items:[ xmmcCombox, { name:"xmdw", xtype:"textfield", fieldLabel:"项目单位", readOnly:true, width:200 },{ name:"depart", xtype:"textfield", fieldLabel:"主管部门", readOnly:true, width:200 } ] }); itemStore.on('load', function (store, record, options) { var comp = record[0].get("company"); var dept = record[0].data.department; addForm.getForm().findField("xmdw").setValue(comp); addForm.getForm().findField("depart").setValue(dept); });
(2).Ext.getCmp("id").setValue("") ——此处用id赋值
var addForm = new Ext.FormPanel({ frame: true, labelWidth: 80, //labelAlign: "right", //buttonAlign:"center", items:[ xmmcCombox, { id:"xmdw", xtype:"textfield", fieldLabel:"项目单位", readOnly:true, width:200 },{ id:"depart", xtype:"textfield", fieldLabel:"主管部门", readOnly:true, width:200 } ] }); itemStore.on('load', function (store, record, options) { var comp = record[0].get("company"); var dept = record[0].data.department; Ext.getCmp("xmdw").setValue(comp); Ext.getCmp("depart").setValue(dept); });
3.Ext.getCmp("id")适用于FormPanel中的元素,不适用于Grid
var cm = new Ext.grid.ColumnModel({
columns:[
{
id:"id",
header:"编号",
dataIndex:"id",
width:200,
hidden:true
},{
header:"项目编号",
dataIndex:"xmid",
width:200,
hidden:true,
editor:new Ext.form.TextField({
id:"xmid"
})
}
]
});
//注:
1.此处用了editor,则Grid需要用EditorGridPanel才能生效
2.此处若想取编号对应的值,用Ext.getCmp("id"),会报错。
像项目编号这样,加上一个editor,增加一个TextField,则用Ext.getCmp("xmid")可以获得项目编号元素,并可继续通过getValue()取值,setValue()赋值。
实例分析:
1.创建表格面板:
/*-----1.创建数据源-----*/ var epStore = new Ext.data.JsonStore({ autoLoad: true, url:"getEProject.eva?doType=getEProject", root:"data", fields: ["xmid","project","company","other"] }); /*-----1.定义列-----*/ var cm = new Ext.grid.ColumnModel({ columns:[ { header:"项目名称", dataIndex:"project", width:200, sortable:true },{ header:"项目单位", dataIndex:"company", width:200, sortable:true },{ header:"项目基本情况", dataIndex:"other", width:100, sortable:true, renderer:function(value, cell, record, row, column, store){ return " <a href='javascript:showBasicMsg()'>点击查看</a>"; } },{ header:"项目支出明细", dataIndex:"other", width:100, sortable:true, renderer:function(value, cell, record, row, column, store){ return " <a href='javascript:showCostWin("+record.get("xmid")+")'>点击查看</a>"; } },{ header:"项目绩效评分", dataIndex:"", width:100, sortable:true, renderer:function(){ return " <button class='btn1' οnclick='showScoreWin("+record.get("xmid")+")'>查看</button>"; } } ] }); //4.创建表格面板 var grid = new Ext.grid.GridPanel({ store:epStore, cm:cm, loadMask:{msg:'正在加载数据,请稍侯……'}, height:80, tbar:[ { text:"增加项目", iconCls:"add", handler:function(){ addWin.show(); } },{ text:"修改", iconCls:"edit" },{ text:"删除", iconCls:"remove" } ] });后台返回数据:
![](https://i-blog.csdnimg.cn/blog_migrate/774736ac0ff16f092c1823673049276d.jpeg)
注意事项:
1.返回的json数据只有3个字段,而Store定义的fields有4个,多了一个other,
说明fields字段可以多于后台返回的json数据的字段数!
2.若要对单元格执行
renderer方法,则
其dataIndex应该和Store的fields某一个字段对应!
(但是如果不想该单元格出现数据,则此时可用多出来的无数据的other!)
当然,dataIndex为空也是可以的:
![](https://i-blog.csdnimg.cn/blog_migrate/5d17ae4f81a32cd8c952672dc462d2d8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5d17ae4f81a32cd8c952672dc462d2d8.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fdbd09c43f79fc0f54cf4982b2a87285.png)
通过调用方法传递参数:
//显示收支明细窗口 function showCostWin(xmid){ Ext.getCmp("costXmid").setValue(xmid); costWin.show(); costStore.baseParams.xmid = xmid; costStore.load(); }注:此处先给store的参数赋值(参数不用先定义!),然后在load().
![](https://i-blog.csdnimg.cn/blog_migrate/1bd23664eaffc75816e1f32b7456a012.png)
2.创建收支明细窗口:
/*1.创建Record*/ var costRecord = new Ext.data.Record.create([ {name:"id",type:"int"}, {name:"xmid",type:"int"}, {name:"subject",type:"string"}, {name:"planCost",type:"string"}, {name:"actualCost",type:"string"} ]); /*2.创建Store*/ var costStore = new Ext.data.Store({ url:"getProjectCost.eva?doType=getProjectCost", reader: new Ext.data.JsonReader({ root:"data" },costRecord) }); /*3.创建列*/ var cm = new Ext.grid.ColumnModel({ columns:[ { header:"编号", dataIndex:"id", width:200, hidden:true },{ header:"项目编号", dataIndex:"xmid", width:200, hidden:true, editor:new Ext.form.TextField({ id:"costXmid" }) },{ header:"支出内容(经济科目)", dataIndex:"subject", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) },{ header:"计划支出数", dataIndex:"planCost", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) },{ header:"实际支出数", dataIndex:"actualCost", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) } ] }); /*4.创建表格面板*/ var costGrid = new Ext.grid.EditorGridPanel({ cm:cm, store:costStore, clicksToEdit:1, loadMask:{msg:'正在加载数据,请稍侯……'}, height:480, width:600, tbar:[ { text:"保存", iconCls:"save", handler:saveCost },{ text:"增加", iconCls:"add", handler:function(){ var newCost = new costRecord({ id:-1, //id为-1,数据传到后台时,则可判断id,若为-1,则执行插入,若不为-1,则执行更新 xmid:Ext.getCmp("costXmid").getValue(), subject:'', subjectId:'', planCost:'', actualCost:'' }); costGrid.stopEditing(); //关闭表格的编辑状态 costStore.add(newCost); //store.insert(0, newCost); //创建的Record插入store的第一行 //store.insert(store.getCount(), newCost); //创建的Record插入store的最后一行 costGrid.startEditing(0, 0); //激活第一行第一列的编辑状态 } },{ text:"删除", iconCls:"remove", handler:removeCost } ] }); /*创建收支明细窗口*/ var costWin = new Ext.Window({ title:"收支明细", frame:"fit", closeAction:"hide", modal:true, items:costGrid });注意:
1.此处使用的是可编辑的表格面板
![](https://i-blog.csdnimg.cn/blog_migrate/f44c033fa14a205bac8ff92fb572b0a7.png)
2.因为ColumnModel不能通过Ext.getCmp()取值赋值,此处给加了一个editor,增加一个TextField
这样子,就可以从通过点击链接,然后调用方法传递参数,把上一个表格面板的xmid传递到这个表格面板对应的xmid单元格中!!!
![](https://i-blog.csdnimg.cn/blog_migrate/f44c033fa14a205bac8ff92fb572b0a7.png)
2.因为ColumnModel不能通过Ext.getCmp()取值赋值,此处给加了一个editor,增加一个TextField
![](https://i-blog.csdnimg.cn/blog_migrate/3c35012a5a3c08fbee546c31aed31469.png)
这样子,就可以从通过点击链接,然后调用方法传递参数,把上一个表格面板的xmid传递到这个表格面板对应的xmid单元格中!!!
此时,在面板的方法中,也可通过Ext.getCmp()方式取值。
调用某个自定义的function(),可以直接用方法名!
![](https://i-blog.csdnimg.cn/blog_migrate/3611742423475eac8174b059e8b129c1.png)
调用某个自定义的function(),可以直接用方法名!
![](https://i-blog.csdnimg.cn/blog_migrate/cba0c5615ca15f4542b91d27ef34add8.png)
3.增加保存收支信息的方法
/*创建保存收支明细方法,只保存修改过的信息*/ function saveCost(){ //只提交修改过的记录 var rcds = costStore.getModifiedRecords(); if(rcds&&rcds.length>0){ Ext.Msg.wait("正在保存..."); var rows=new Array(); for(var i=0;i<rcds.length;i++){ var rs = rcds[i]; var row=new Object(); var fields=rs.data; row = {id:fields.id,xmid:fields.xmid,subject:fields["subject"],planCost:fields["planCost"],actualCost:fields["actualCost"]}; rows.push(row); } Ext.Ajax.request({ url: 'updateProjectCost.eva?doType=updateProjectCost', method:'POST', timeout:300000, success: result, failure: function(){Ext.Msg.alert('信息','未成功提交数据!'); }, params:{updateSets :Ext.encode(rows)} }); function result(response, options){ var result = Ext.util.JSON.decode(response.responseText); if(result.success){ Ext.Msg.hide(); Ext.Msg.show({title:'成功', msg: '数据保存成功', buttons: Ext.Msg.OK, icon: Ext.MessageBox.INFO}); //保存成功后刷新修改过的脏数据。 costStore.rejectChanges(); costStore.reload(); }else{ Ext.Msg.hide(); Ext.Msg.alert('信息','保存数据未成功!'); } } } }
注意:
1.js中集合即数组,遍历时,只能遍历 obj.length, 而不能遍历 obj.size()
2.遍历到下标 i 时,取下标 i 对应的值,只能用 obj[i], 不能用 obj.get(i)
(注意:此处是getModifiedRecords,得到的是一个数组!!!)
(如果是用store.data获得到的一个Records,则不是数组,不能用上面的方式,得用records.get(i)!!!)
3.js中的顶级父类是 object, 即所有对象都是 object, 但是取值跟java不同,
只能是 obj.name 或 obj["name"], 而不能用obj.get("name")!!!
具体可查看:http://blog.163.com/wumingli456@126/blog/static/2889641420101333142939/
![](https://i-blog.csdnimg.cn/blog_migrate/c59e5fc2f0391931469aad071ed84624.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d9ae9e8c73f73754f2d87775b4b9c1bb.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d1f565f15b7da89d11be68d45264fe6e.png)
4.修正:给表格面板添加复选框
/*3.创建列*/ var sm = new Ext.grid.CheckboxSelectionModel({ //singleSelect:true, //是否单选 handleMouseDown:Ext.emptyFn //若有该项,则单击行不选中,只有单击复选框才能选中 }); /*sm.singleSelect = true; sm.handleMouseDown = Ext.emptyFn;*/ //第二种写法 var cm = new Ext.grid.ColumnModel({ columns:[ sm, //1.现在columnModel中添加SelectionModel { header:"编号", dataIndex:"id", width:200, hidden:true },{ header:"项目编号", dataIndex:"xmid", width:200, hidden:true, editor:new Ext.form.TextField({ id:"costXmid" }) },{ header:"支出内容(经济科目)", dataIndex:"subject", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) },{ header:"计划支出数", dataIndex:"planCost", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) },{ header:"实际支出数", dataIndex:"actualCost", width:200, sortable:true, editor:new Ext.form.TextField({ allowBlank: false }) } ] }); /*4.创建表格面板*/ var costGrid = new Ext.grid.EditorGridPanel({ cm:cm, sm:sm, 2.再在GridPanel中添加SelectionModel store:costStore, clicksToEdit:1, stripeRows: true, loadMask:{msg:'正在加载数据,请稍侯……'}, height:480, width:600, tbar:[ { text:"保存", iconCls:"save", handler:saveCost },{ text:"增加", iconCls:"add", handler:function(){ var newCost = new costRecord({ id:-1, //id为-1,数据传到后台时,则可判断id,若为-1,则执行插入,若不为-1,则执行更新 xmid:Ext.getCmp("costXmid").getValue(), subject:'', subjectId:'', planCost:'', actualCost:'' }); costGrid.stopEditing(); //关闭表格的编辑状态 costStore.add(newCost); //store.insert(0, newCost); //创建的Record插入store的第一行 //store.insert(store.getCount(), newCost); //创建的Record插入store的最后一行 costGrid.startEditing(0, 0); //激活第一行第一列的编辑状态 } },{ text:"删除", iconCls:"remove", handler:removeCost } ] });
注意:
1.创建的CheckboxSelectionModel必须在ColumnModel和GridPanel中都添加!
2.表格增加一行空行时的注意事项:
5.添加勾选复选框进行删除的方法
/*创建删除收支信息的方法,删除复选框勾选的记录*/ function removeCost(){ var rcs = costGrid.getSelectionModel().getSelections(); if(!rcs||rcs.length<1){ Ext.Msg.alert("提示","请先选择要删除的行"); return; } else{ Ext.Msg.confirm("确认删除","请确认是否删除选中的项目支出条目?",function(btn){ if(btn == "yes"){//选中"是"的按钮 var ids = new Array(); for (var i = 0; i < rcs.length; i++) { ids.push(rcs[i].get("id")); } //异步发请求 Ext.Ajax.request({ url:"deleteCosts.eva?doType=deleteCosts", method:"POST", params:{costIds:ids.join(",")}, success:function(response,option){ var result = Ext.util.JSON.decode(response.responseText); if (result.success) { Ext.Msg.alert("删除成功","选中的项目支出条目已成功删除!"); costStore.rejectChanges(); costStore.reload(); } }, failure:function(response,option){ Ext.Msg.alert("删除失败","删除过程中发生错误!"); } }); } }); } }注意:
Js中obj取值不能用get,而Extjs中取值可以用get。
如下所示:此处 rcs 是Ext中的sm,类似record,可用get取值。
Js中通过数组的 join("separate")来把数据合并成一个字符串,然后在java后台通过string.split("separate")分割
else if("deleteCosts".equals(action)){
String ids = request.getParameter("costIds");
ProjectCostDao costDao = new ProjectCostDao();
boolean done = costDao.deleteCosts(ids);
String str =null;
if(done){
str="{success:true}";
}else{
str="{success:false}";
}
response.setContentType("text/html;charset=UTF-8");
out=response.getWriter();
out.print(str);
out.close();
return;
}
/**
* 通过传入的id删除支出记录
* @param idss
* @return
*/
public boolean deleteCosts(String idss) {
Session s = null;
boolean done = false;
List<Integer> ids = new ArrayList<Integer>();
String[] costIds = idss.split(",");
for (int i = 0; i < costIds.length; i++) {
ids.add(Integer.valueOf(costIds[i]));
}
try {
s = HibernateUtil.getSession();
s.beginTransaction();
StringBuffer sb = new StringBuffer("delete from project_cost where id in(");
for (int i = 0; i < ids.size(); i++) {
sb.append(ids.get(i));
if (i != ids.size() -1) {
sb.append(",");
}
}
sb.append(")");
Query query = s.createSQLQuery(sb.toString());
query.executeUpdate();
s.getTransaction().commit();
done = true;
} catch (Throwable e) {
logger.error(e.toString());
HibernateUtil.endSession(s);
} finally {
HibernateUtil.endSession(s);
}
return done;
}