首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

form的批改

2012-10-13 
form的修改该文章实现了从服务器得到数据(以json类型)在页面显示,页面有两个表单点击一个表单的某一行,就

form的修改
=
该文章实现了从服务器得到数据(以json类型)在页面显示,
页面有两个表单
点击一个表单的某一行,就会在另个一表单上显示所点击的这行的数据,还可以进行修改!
目前修改后的数据还没有传到数据库,以后再实现
学到现在为止,感觉Extjs确实很牛

formUpdate.jsp
-----------------------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css">
<link rel="stylesheet" type="text/css" href="../css/extj10.css">
<script type="text/javascript" src="../extjs/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../js/formUpdate.js"></script>
</head>
<body>
</body>
</html>
=================================================
formUpdate.js
---------------------------
Ext.onReady(function() {
var _grid = new Ext.grid.GridPanel({
renderTo : Ext.getBody(),
height : 200,
width : 350,
enableColumMove : false,
id : "_grid",
colModel : new Ext.grid.ColumnModel([{
header : "姓名",
align : "center",
dataIndex : "name",
menuDisable : true
}, {
header : "年龄",
align : "center",
dataIndex : "age",
menuDisable : true
}, {
header : "性别",
align : "center",
dataIndex : "sex",
menuDisable : true
}]),
store : new Ext.data.JsonStore({
autoLoad : true,
url : "http://localhost:8080/extjs_11/server",
fields : ["name", "age", "sex"]
}),
selModel : new Ext.grid.RowSelectionModel({
singleSelect : true,
listeners : {
"rowselect" : function(_sm, _index, _r) {
Ext.getCmp("_form").getForm()
.loadRecord(_r);
}
}
})
});
var _from = new Ext.form.FormPanel({
renderTo : Ext.getBody(),
width : 350,
id : "_form",
frame : false,
defaultType : "textfield",
items : [{
fieldLabel : "姓名",
name : "name"
}, {
fieldLabel : "年龄",
name : "age"
}, {
fieldLabel : "性别",
name : "sex"
}],
buttonAlign : "center",
buttons : [{
text : "修改",
handler : function() {
if (Ext.getCmp("_grid").getSelectionModel().getCount() == 0) {
return;
}
var _rs = Ext.getCmp("_grid").getSelectionModel().getSelected();
var _values = Ext.getCmp("_form").getForm().getValues();// ownerCt父容器
_rs.set("name", _values["name"]);
_rs.set("age", _values["age"]);
_rs.set("sex", _values["sex"]);
_rs.commit;
}
}]
});
});
==================================
server.java
---------------------------------
public class server extends HttpServlet {
private PrintWriterout;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/json;charset=UTF-8");
out = resp.getWriter();
out.write("[{name:'ygl',age:22,sex:'男'},{name:'zfl',age:22,sex:'女' }]");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}

}
========

热点排行