JS小練習代碼之二第1/2頁

2019-11-21 01:36:03

字體：大中小

來源：轉載

供稿：網友

相關的源代碼如下:
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() ;
}
}) ;

12 下一頁閱讀全文

上一篇：js驗證符合用戶體驗的網頁表單特效

下一篇：JS之小練習代碼