JS小练习代码之二第1/2页
JS小练习代码之二第1/2页
发布时间:2016-12-30 来源:查字典编辑
摘要:相关的源代码如下:1.beginFormPanel.js(作用:外层html文件中表单的展现)varbeginFormPanel=Ext.e...

相关的源代码如下:

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() ;

}

}) ;

当前1/2页12下一页阅读全文

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类