JS 작은 연습코드 2_

JS 실습코드

해당 소스코드는 다음과 같습니다.
1.beginFormPanel.js (기능: 외부 html 파일에 폼 표시)

<script> 
var beginFormPanel = Ext.extend(Ext.form.FormPanel,{ 
constructor:function() 
{ 
beginFormPanel.superclass.constructor.call 
( 
this, 
{ 
title:"myForm(绝不裸奔)", 
width:418, 
height:180, 
frame:true, 
labelWidth:45, 
style:"margin-left:250px", 
defaultType:"textfield", 
defaults:{anchor:"95%"}, 
items: 
[ 
{ 
fieldLabel:"姓名", 
name:"name" 
}, 
{ 
fieldLabel:"年龄", 
name:"age" 
}, 
{ 
fieldLabel:"性别", 
name:"sex" 
}, 
{ 
fieldLabel:"住址", 
name:"addr" 
} 
], 
buttons: 
[ 
{ 
text:"添加" 
}, 
{ 
text:"修改" 
}, 
{ 
text:"删除" 
} 
], 
renderTo:Ext.getBody() 
} 
) ; 
} 
}) ; 
</script>

2.beginPanel.js (함수: GridPanel 및 창과 창에 FormPanel 구현)

<script> 
/**************************** FormPanel *****************************************************/ 
var myWindowForm = Ext.extend(Ext.form.FormPanel,{ 
constructor:function() 
{ 
myWindowForm.superclass.constructor.call 
( 
this, 
{ 
labelWidth:45, 
defaultType:"textfield", 
defaults:{anchor:"93%"}, 
style:"padding:5px", 
baseCls:"x-plain", 
items: 
[ 
{ 
fieldLabel:"姓名", 
name:"name", 
allowBlank:false, 
blankText:"姓名不能够为空!" 
}, 
{ 
fieldLabel:"年龄", 
name:"age", 
allowBlank:false, 
vtype:"age", 
blankText:"年龄不能够为空!" 
}, 
{ 
fieldLabel:"性别", 
name:"sex", 
allowBlank:false, 
blankText:"性别不能够为空!" 
}, 
{ 
fieldLabel:"住址", 
name:"addr", 
allowBlank:false, 
blankText:"住址不能够为空!" 
} 
] 
} 
) ; 
}, 
getValues:function() 
{ 
if(this.getForm().isValid()) 
{ 
return new Ext.data.Record(this.getForm().getValues()) ; 
} 
else 
{ 
throw error("表单验证没通过哦!") ; 
} 
}, 
setValues:function(record) 
{ 
this.getForm().loadRecord(record) ; 
}, 
reset:function() 
{ 
this.getForm().reset() ; 
} 
}) ; 
/******************************** Window ***********************************/ 
var myWindow = Ext.extend(Ext.Window,{ 
form:new myWindowForm(), 
constructor:function() 
{ 
myWindow.superclass.constructor.call 
( 
this, 
{ 
title:"myWindow(绝不裸奔)", 
width:300, 
height:185, 
frame:true, 
plain:true, 
modal:true, 
items:this.form, 
closable:false,//禁止关闭 
collapsible:true,//可折叠 
buttons: 
[ 
{ 
text:"确定", 
handler:this.onSubmitClick, 
scope:this 
}, 
{ 
text:"取消", 
handler:this.onCancelClick, 
scope:this 
} 
] 
} 
) ; 
this.addEvents("submit") ; 
}, 
close:function() 
{ 
this.hide() ; 
}, 
onSubmitClick:function() 
{ 
/* 
try 
{ 
this.fireEvent("submit",this,this.form.getValues()) ; 
} 
catch (error) 
{ 
Ext.Msg.alert("警告","请将需要填写的信息填写完整!") ; 
} 
*/ 
this.fireEvent("submit",this,this.form.getValues()) ; 
this.close() ; 
}, 
onCancelClick:function() 
{ 
//上面不加scope属性则提示this.form为空 
this.form.reset() ; 
this.close() ; 
} 
}) ; 
/************************** GridPanel **************************************/ 
var beginMyPanel = Ext.extend(Ext.grid.GridPanel,{ 
insertWin:new myWindow(), 
constructor:function() 
{ 
//this.insertWin = new myWindow() ; 
var myData = 
[ 
["th","91","非女","地球"], 
["thtwin","92","男","地球"], 
["thtwinj2ee","93","非女","地球"], 
["thj2ee","94","男","地球"], 
["thtwin","95","非女","地球"] 
] ; 
var myRecord = Ext.data.Record.create 
( 
["name","age","sex","addr"] 
) ; 
var myColumn = new Ext.grid.ColumnModel 
( 
[ 
{header:"姓名",dataIndex:"name"}, 
{header:"年龄",dataIndex:"age"}, 
{header:"性别",dataIndex:"sex"}, 
{header:"住址",dataIndex:"addr"} 
] 
) ; 
var myStore = new Ext.data.Store 
( 
{ 
proxy:new Ext.data.MemoryProxy(myData), 
reader:new Ext.data.ArrayReader 
( 
{}, 
myRecord 
) 
} 
) ; 
beginMyPanel.superclass.constructor.call 
( 
this, 
{ 
title:"myGridPanel(thtwinj2ee)", 
frame:true, 
width:418, 
height:250, 
cm:myColumn, 
ds:myStore, 
style:"margin:20,0,10,250", 
tbar: 
[ 
{ 
text:"添加人员", 
handler:function() 
{ 
this.insertWin.show() ; 
}, 
scope:this 
}, 
"-",//得到的结果为:| 
{text:"修改人员"}, 
"-", 
{text:"删除人员"} 
], 
selModel:new Ext.grid.RowSelectionModel 
( 
{ 
listeners: 
{ 
"rowselect": 
{ 
fn:function(row,index,record) 
{ 
this.setTitle("修改之后的GridPanel的名字!") ; 
//注意下面的这句 ***** 1 ****** 
this.fireEvent("rowselect",record) ; 
}, 
scope:this 
} 
} 
} 
), 
renderTo:Ext.getBody() 
} 
) ; 
myStore.load() ; 
//注意下面这句 ***** 2 ****** 
this.addEvents("rowselect") ; 
this.insertWin.on("submit",this.onInsertWinSubmit,this) ; 
}, 
insert:function(myRecord) 
{ 
this.getStore().add(myRecord) ; 
}, 
onInsertWinSubmit:function(insertWin,myRecord) 
{ 
this.insert(myRecord) ; 
} 
}) ; 
</script>

3. 정적 HTML 페이지의 성능

<html> 
<head> 
<title></title> 
<link rel="stylesheet" type="text/css" href="../AllRes/resources/css/ext-all.css"/> 
<script type="text/javascript" src="../AllRes/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="../AllRes/ext-all.js"></script> 
<script type="text/javascript" src="beginPanel.js"></script> 
<script type="text/javascript" src="beginFormPanel.js"></script> 
<script> 
Ext.onReady(function(){ 
Ext.QuickTips.init() ; 
Ext.form.Field.prototype.msgTarget="side" ; 
Ext.apply(Ext.form.VTypes,{ 
"age":function(value) 
{ 
//此处用正则表达式要使 
if(/^\d+$/.test(value)) 
{ 
return true ; 
} 
return false ; 
}, 
"ageText":"请输入正确的年龄!" 
} 
) ; 
/* var newnewMyWindowForm = new myWindowForm() ; 
newMyWindowForm.render(Ext.getBody()) ; 
*/ 
// var newnewMyWindow = new myWindow() ; 
// newMyWindow.show() ; 
var myGridPanel = new beginMyPanel() ; 
var myForm = new beginFormPanel() ; 
//注意下面这句与***** 1 ****** 和 ***** 2 ******的关系 
myGridPanel.on 
( 
"rowselect", 
function(selectedRow) 
{ 
this.getForm().loadRecord(selectedRow) ; 
}, 
myForm 
) ; 
}) ; 
</script> 
</head> 
<body> 
</body> 
</html>