动态加载表单数据的例子

<script type="text/javascript">
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});

var cm=new Ext.grid.ColumnModel([
sm,
{
header : "员工编号",
dataIndex : "eid",
sortable:true
}, {
header : "员工姓名",
dataIndex : "ename"
}, {
header : "邮箱",
dataIndex : "eemail"
}, {
header : "地址",
dataIndex : "eaddress"
}, {
header : "工资",
dataIndex : "salary"
},{
header:"部门",
dataIndex:"did"
}
])
var store = new Ext.data.JsonStore({
url : 'getEmployeeWeb?id='+<%=id%>,
root : 'rows',
fields : ['did', 'eemail', 'eaddress', 'ename', 'eid', 'salary']
});
Ext.onReady(function() {
store.load({ params: { start: 0, limit: 2 }});
var grid = new Ext.grid.GridPanel({
id:'employeegrid',
renderTo : "employee",
title : "员工信息",
height : 635,
width : 900,
cm:cm,
store : store,
autoExpandColumn : 2,
sm:sm,
trackMouseOver:true,
stripeRows:true,
viewConfig: {
forceFit:true ,//平均分配列
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列"
},
//分页
bbar:new Ext.PagingToolbar({
store:store, //数据源
pageSize:2,
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录', //显示右下角信息
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
}),
tbar: //工具条
[
{
text: '添加',
handler: function(btn, pressed)
{
AddEmployeeInfo(); //添加新的员工信息
}
}, '-',
{
text: '修改',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
editEmployee(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{
deleteEmployee(row[0]);//删除角色信息
}
else
{

}
})
}
}
}
],

listeners : {
// 点击行弹出一个窗体
rowclick : function(grid, row) {
//doubleclick();
}
}
});
/*********************删除员工信息****************************/
function deleteEmployee(record){
Ext.Ajax.request({
url : 'deleteEmployeeWeb',//Ajax请求路径，返回success or false
params:{
eid:record.get("eid")
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","删 除 成 功！");
//window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","删 除 失 败！");
//window.close();
}
}
}
})
}
/*********************编辑员工信息****************************/
function editEmployee(record) {
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
items : new Ext.FormPanel({
id : 'employee-form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,

items : [{
fieldLabel : '员工编号',
id:'id',
readOnly:true,
value : record.get("eid")
},
{
fieldLabel : '部门编号',
id:'did',
readOnly:true,
value : record.get("did")
},
{
fieldLabel : '姓名',
name : 'ename',
id:'ename',
value : record.get("ename")
}, {
fieldLabel : '邮箱',
name : 'eemail',
id:'eemail',
value : record.get("eemail")
}, {
fieldLabel : '地址',
id:'eaddress',
name : 'eaddress',
value : record.get("eaddress")
}, {
fieldLabel : '工资',
id:'salary',
name : 'salary',
value : record.get("salary")
},{
xtype : 'panel',
layout : 'fit',
id : 'loginform-btnpanel',
border : false
}
],
buttons: [{
text: '保存',
handler:function(){
Ext.Ajax.request({
url : 'editEmployeeWeb',//Ajax请求路径，返回success or false
params:{
id:document.getElementById("id").value+"/"+document.getElementById("ename").value+
'/'+document.getElementById("eemail").value+"/"+
document.getElementById("eaddress").value+"/"+
document.getElementById("salary").value+"/"+
document.getElementById("did").value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功！");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败！");
window.close();
}
}
}
})
}
},{
text: '取消',
handler:function(){
window.close();
}
}]
}),
plain : true,
title : "个人详细信息"
})
window.show();
}
});
/**************添加员工信息**********************/
function AddEmployeeInfo(){
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
plain : true,
title : "员工信息",
items:new Ext.FormPanel({
id : 'addEmployee_form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
baseCls:"x-plain",
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
items:[
{
name:"id",
id:"id",
xtype:"hidden",
value:"<%=id%>"
},
{
fieldLabel:"姓名",//文本框标题
name:"ename",
id:"ename"
}
,
{
fieldLabel:"邮箱",//文本框标题
name:"eemail",
id:"eemail"
}
,
{
fieldLabel:"地址",//文本框标题
name:"eaddress",
id:"eaddress"
}
,
{
fieldLabel:"工资",//文本框标题
name:"salary",
id:"salary"
}
],

buttons:[{text:"确定",handler:function(){
Ext.Ajax.request({
//请求地址
url:'addEmployeeWeb',
//提交参数组
params: {
id:Ext.get('id').dom.value,
ename:Ext.get('ename').dom.value,
eemail:Ext.get('eemail').dom.value,
eaddress:Ext.get('eaddress').dom.value,
salary:Ext.get('salary').dom.value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功！");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败！");
window.close();
}
}
}
});

}},{text:"取消",handler:function(){window.close()}}]
})
})
window.show();
}
</script>