转载

Ext.form.formPanel 与服务器交互 初始化表单

    formPanel 初始化表单有两种方式加载，一种是本地加载，一种是通过返回回来的Json格式数据加载到表单里面。
得到表单来加载数据的时候，必须用form.getForm(), 得到basicForm()这个对象，formPanel是继承自basciForm()
本地加载通过form.getForm.loadRecord() 加载，传入的一个记录集(new Ext.data.record.create())。 根据相应的映射会自动匹配到表单的每个文本框。
    比如，通过点击表格的编辑连接，得到表格记录的行数据，初始化到表单。
var updateGrid = Ext.getCmp("displayEmpGrid");
var rows = updateGrid.getSelectionModel().getSelections();
if (rows) {
//for (var i = 0; i < rows.length; i++) {
alert(rows[0].imageUpload);
form.getForm().loadRecord(rows[0]); //将数据集加载到表单中,直接获取表格的数据
Ext.get('imageBrowse').dom.src = "images/anniubg.gif";
//}
}
    这种方式是将所有的数据放一次到页面，加载所有的数据到页面会加重页面负担。。

    远程加载是通过 form.getForm().load()加载。
// 解析后台返回的数据

var empReader = new Ext.data.JsonReader              //解析Json格式数据。 ({                                                                                                                                                                                                                                                  

name:"empNo ",   //表单对应的属性名

mapping:"empNo"      //为json数据里面 对应的属性值

}，{name:"empName", mapping:"empName"});

form.getForm().reader = empReader;   //这个不能少，不然明明有获得数据，确没有显示。。

// 从后台加载json格式数据
form.getForm().load({
url : "employee_selectByPrimaryEmployee.action",     
method : "POST",
params : {
empNo : empNo //参数
}
});

//json数据,即action中 selectByPrimaryEmployee 所要返回到页面的json数据格式

var json = [{empNo:"111",empName:"小王"}];

     printwrite.print(json);     //将数据返回到前台

    这样子就是通过将服务器数据加载到表单显示。一定要注意，加载本地和加载远程不要用错方法了，加载远程是用load(),里面传的url。 本地用 加载用loadRecord()，直接传入一个Stroe的记录集，就可以加载进去。

------------------------------------------------------------------------------------------------------------------------------------

grid.on('rowdblclick', function(grid, rowIndex, e) {   

1.        var selectedId = ds.data.items[rowIndex].id;  
2.      form1.loadRecord(ds.getAt(selectedId-1));  
3.     }); 
   

Ext.form.Form.loadRecord( Record record ) 加载一条记录，如果再做一点简单的工作，form可以根据grid记录的结构自动生成、渲染。

另外data store有个方便的query方法，可以判断grid某记录是否是新增加记录，比如这样：

1. if(ds.query('state','new').length!=0){  
2.    console.log("我有新增记录！");  
3.    //......  
4. } 
   

var editForm = new Ext.form.FormPanel( {
baseCls : 'x-plain',
labelWidth : 75,
url : 'editCustomer.adminService',
defaultType : 'textfield',
items : [new Ext.form.TextField( {
fieldLabel : 'userID',
allowBlank : false,
name : 'id',
anchor : '90%'
}), {
fieldLabel : '用户名',
name : 'name',
allowBlank : false,// readOnly：true,
anchor : '90%'
}, {
fieldLabel : '真实姓名',
name : 'realName',
allowBlank : false,
anchor : '90%'
}, {
fieldLabel : '国籍',
name : 'unation',
allowBlank : false,
anchor : '90%'
}]
});

var editWin;
var editCustomer = function() {
if (!currRecord) {
Ext.MessageBox.alert('提示', '请选择一个用户。');
} else {
if (!editWin) {
editWin = new Ext.Window( {
title : '修改用户信息',
layout : 'fit',
width : 500,
height : 300,
closeAction : 'hide',
plain : true,
modal : true,
items : editForm,
buttons : [ {
text : '保存',
handler : function() {
// 保存修改信息
if (editForm.form.isValid()) {
editForm.form.submit( {
waitMsg : '正在处理...',
failure : function(form, action) {
Ext.MessageBox.alert(
'Error Message', '保存失败');
},
success : function(form, action) {
Ext.MessageBox.alert('提示', '保存成功');
addWin.hide();
store.reload();
}
});
} else {
Ext.MessageBox
.alert('错误', '请修正页面提示的错误后提交。');
}
}
}, {
text : '关闭',
handler : function() {
editWin.hide();
}
}]
});
}
editWin.show();
editForm.getForm().loadRecord(currRecord);
}
}