JS小练习代码之二第1/2页

 更新时间:2008年10月12日 23:25:25   作者:  
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() ;
}
}) ;

相关文章

  • ko knockoutjs动态属性绑定技巧应用

    ko knockoutjs动态属性绑定技巧应用

    ko的动态属性是指,ViewModel不确定的属性,而后期却需要的属性,本文将详细介绍,需要的朋友参考下
    2012-11-11
  • javascript数字验证的实例代码(推荐)

    javascript数字验证的实例代码(推荐)

    下面小编就为大家带来一篇javascript数字验证的实例代码(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • js判断横竖屏及禁止浏览器滑动条示例

    js判断横竖屏及禁止浏览器滑动条示例

    这篇文章主要介绍了使用js如何判断横竖屏及禁止浏览器滑动条,需要的朋友可以参考下
    2014-04-04
  • li隔行换色改进版

    li隔行换色改进版

    隔行换色非表格版不过原理可以参考下面的代码,写的很不错
    2008-05-05
  • BootStrap 动态表单效果

    BootStrap 动态表单效果

    这篇文章主要介绍了BootStrap 动态表单效果,实现代码分为js部分和html部分,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Javascript实现单例模式

    Javascript实现单例模式

    单例模式也称作为单子模式,更多的也叫做单体模式。为软件设计中较为简单但是最为常用的一种设计模式。这篇文章主要介绍了Javascript实现单例模式的相关资料,需要的朋友可以参考下
    2016-01-01
  • 在一个页面重复使用一个js函数的方法详解

    在一个页面重复使用一个js函数的方法详解

    下面小编就为大家带来一篇在一个页面重复使用一个js函数的方法详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-12-12
  • webpack项目轻松混用css module的方法

    webpack项目轻松混用css module的方法

    这篇文章主要介绍了webpack项目轻松混用css module的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 基于JavaScript实现全选、不选和反选效果

    基于JavaScript实现全选、不选和反选效果

    这篇文章主要为大家详细介绍了基于JavaScript实现全选、不选和反选效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jquery+css3实现网页背景花瓣随机飘落特效

    jquery+css3实现网页背景花瓣随机飘落特效

    在qq空间可以自定义一些插件,装饰空间,大家通常就是复制代码到空间粘贴,会实现非常美观的效果,有的会随机飘落一些花瓣,那么这种效果用代码怎么实现的呢,下面小编给大家详解jquery实现网页背景花瓣随机飘落特效,需要的朋友可以参考下
    2015-08-08

最新评论