200分求助 EXT高手

Question

EXTJS 3.0
问题：如果去掉产品代码中的id则修改时回填数据正常，如如果不去掉修改时FormPanel布局出现会乱现象JS代码如下文件名：PersonListGridPanel.js
ProductInfoFormPanel = Ext.extend(Ext.form.FormPanel , {

constructor:function(){

ProductInfoFormPanel.superclass.constructor.call(this , {
labelWidth:55,
defaultType:"textfield",
defaults:{anchor:"98%"},
baseCls:"x-plain",
items:[{
 fieldLabel:"产品ID",
 name:"proID",
 inputType:'hidden'
},{

allowBlank :false,
fieldLabel:"产品代码",
name:"proCode",
id:'proCode',
blankText : "不能为空",
regex:/[0-9]/,
 regexText:"只能是数字",
maxLength:"8",
maxLengthText:"不能大于8位"
},{
 allowBlank :false,
 fieldLabel:"产品名称",
 name:"proName",
 blankText : "不能为空",
maxLength:"100",
maxLengthText:"不能大于100位"
},{
 fieldLabel:"客户名称",
 name:"clientName",
 maxLength:"10",
 maxLengthText:"不能大于10位"
}]
}) ;
},
getValues:function(){

if(this.getForm().isValid())

return new Ext.data.Record(this.getForm().getValues()) ;

else

throw Error("表单验证没有通过") ;
},
setValues:function(_r){

this.getForm().loadRecord(_r) ;
},
reset:function(){

this.getForm().reset() ;
}
}) ;/***************************************************************************************************************************//***************************************************************************************************************************/ProductInfoWindow = Ext.extend(Ext.Window , {

form:null,

constructor:function(){

this.form = new ProductInfoFormPanel() ;

ProductInfoWindow.superclass.constructor.call(this , {

plain:true,

width:300,

modal:true,

items:this.form,

closeAction:"hide",

buttons:[{
text:"确 定",
handler:this.onSubmitClick,
scope:this
},{
text:"取 消",
handler:this.onCancelClick,
scope:this
}]
}) ;

this.addEvents("submit") ;
},

close:function(){

this.form.reset() ;

this.hide() ;
},

onSubmitClick:function(){

try{

this.fireEvent("submit" , this , this.form.getValues()) ;

}catch(_err){

return ;
}

this.close() ;
},
onCancelClick:function(){

this.close() ;
}

}) ;/***********************************************************************************************************************/InsertProductInfoWindow = Ext.extend(ProductInfoWindow , {
title:"添加产品"
 }) ;/************************************************************************************************************************/UpdateProductInfoWindow = Ext.extend(ProductInfoWindow , {
title:"修改产品",
load:function(_r){

this.form.setValues(_r) ;
}
 }) ;/************************************************************************************************************************/
var cm = new Ext.grid.ColumnModel([ {header:'产品ID',dataIndex:'proID',align :"center",sortable: 'true',menuDisabled :false},
{header:'产品代码',dataIndex:'proCode',align :"center",sortable: 'true',menuDisabled :false},
{header:'客户名称',dataIndex:'clientName',align :"center",sortable: 'true',menuDisabled :false},
{header:'产品名称',dataIndex:'proName',align :"center",sortable: 'true',menuDisabled :false}

]);
cm.defaultSortable = true;
ProductListGridPanel = Ext.extend(Ext.grid.GridPanel , {

insertWin:new InsertProductInfoWindow(),

updateWin:new UpdateProductInfoWindow(),

constructor:function(){

ProductListGridPanel.superclass.constructor.call(this , {
stripeRows: true,
renderTo:Ext.getBody(),
height:200,
width:Ext.get("mydiv").getWidth(),
tbar:[{
   text:"添加产品",
handler:function(){

this.insertWin.show() ;
},
scope:this
},"-",{
text:"修改产品",
handler:function(){

this.updateWin.show() ;

try{

this.updateWin.load(this.getSelected()) ;

}catch(_err){

Ext.Msg.alert("系统提示" , _err.description) ;

this.updateWin.close() ;
}
},
scope:this
},"-",{
text:"删除产品",
handler:function(){

Ext.Msg.confirm("系统提示" , "你是否确定删除此记录吗?" , this.onRemoveProduct , this) ;


},
scope:this
}],

colModel:cm,
store:new Ext.data.Store({
autoLoad:true,
url:ProductListGridPanel.STORE_URL,
reader:new Ext.data.XmlReader({record:"row"} ,
Ext.data.Record.create(["proID","proCode","clientName","proName"]))
}),
viewConfig:
{
columnsText : "显/ 隐列",
sortAscText : "正序排列",
sortDescText : "倒序排列"
 
},
 
 
 bbar: new Ext.PagingToolbar({ 
        pageSize: 10, 
        store: this.store, 
        displayInfo: true, 
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
        emptyMsg: "没有记录" 
    }) ,
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{

"rowselect":{
fn:this.onRowSelect,
scope:this
}
}
})
}) ;
this.insertWin.on("submit" , this.onInsertWinSubmit , this) ;

this.updateWin.on("submit" , this.onUpdateWinSubmit , this) ;

this.addEvents("rowselect") ;
},
getSelected:function(){

var _sm = this.getSelectionModel() ;

if(0 == _sm.getCount()  )

throw Error("你尚未选定一条产品记录") ;

return _sm.getSelected() ;
},
insert:function(_r){
this.getStore().add(_r) ;
},
update:function(_r){

try{

var _sr = this.getSelected() ;

var _data = _sr.data ;

for(var _i in _data){

_sr.set(_i , _r.get(_i)) ;
}

_sr.commit() ;

}catch(_err){
throw Error("你尚未选定一条产品记录") ;
}
},
remove:function(){

try{

this.getStore().remove(this.getSelected()) ;

}catch(_err){

Ext.Msg.alert("系统提示" , _err.description) ;
}
},
onInsertWinSubmit:function(_win , _r){

this.insert(_r) ;
},
onUpdateWinSubmit:function(_win , _r){

this.update(_r) ;
},
onRemoveProduct:function(_btn){

if(_btn == "yes")

this.remove() ;
},
onRowSelect:function(_sel , _index , _r){

this.fireEvent("rowselect" , _r) ;
}}) ;ProductListGridPanel.STORE_URL = "http://localhost/extjstest/server/app/test/11/xmlstore.asp" ;html代码如下，文件名：complete.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>产品列表</title>
<link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css"><script type="text/javascript" src="../../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../../ext-all.js">
</script>
<script type="text/javascript" src="PersonListGridPanel.js">
</script><script type="text/javascript"> Ext.onReady(function(){

Ext.QuickTips.init() ;

Ext.form.Field.prototype.msgTarget = "side" ;

//Ext.BLANK_IMAGE_URL ="http://localhost/extjstest/resources/images/default/s.gif" ;

var _panel = new ProductListGridPanel() ;

var _form = new ProductInfoFormPanel() ; //_form.render(Ext.getBody()) ;

_panel.on("rowselect" , function(_r){

_form.setValues(_r) ;

}) ;

}) ;</script>
</head><body>
<center/>
<br/><br/><br/><br/><div id='mydiv' style="width:90%" ></div>
</body>
</html>