JS之小练习代码


Posted in Javascript onOctober 12, 2008

没有html代码,只有JS代码,小练习内容如下:(从陈治文老师的课程中学到)
<script>
Ext.onReady(function(){
// Ext.Msg.alert("系统提示(thtwinj2ee)","环境配置正确!") ;
var myPosition = Ext.data.Record.create(
[{name:"position"}]
) ;//返回一个function
new Ext.Window({
title:"测试用窗口(绝不裸奔)",
width:550,
height:370,
labelWidth:70,
plain:true ,
layout:"form",
defaults:{anchor:"95%"},
// buttonAlign:"center",
items:
[
{
layout:"column",
baseCls:"x-plain",
style:"padding:8px",
items:
[
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
defaults:{width:150},
defaultType:"textfield",
items:
[
{
fieldLabel:"姓名"
},
{
fieldLabel:"年龄",
value:23,
readOnly:true
},
{
xtype:"datefield",
format:"Y-m-d",
value:"1986-11-16",
readOnly:true,
fieldLabel:"出生日期",
listeners:
{
"blur":function(_df)
{
var _age = _df.ownerCt.findByType("textfield")[1] ;
_age.setValue(new Date().getFullYear() - _df.getValue().getFullYear() + 1) ;
}
}
},
{
fieldLabel:"联系电话"
},
{
fieldLabel:"手机号码"
},
{
fieldLabel:"电子邮件"
},
{
xtype:"combo",
fieldLabel:"性别",
readOnly:true,
displayField:"sex",
value:"男",
triggerAction:"all",
mode:"local",
store:new Ext.data.SimpleStore
(
{
fields:["sex"],
data:[["男"],["女"]]
}
)
}
]
},
{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
items:
[
{
xtype:"textfield",
width:185,
height:178,
fieldLabel:"个人头像",
inputType:"image"
}
]
}
]
},
{
layout:"form",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
defaultType:"textfield",
labelWidth:71,
items:
[
{
fieldLabel:"身份证号码",
width:415
},
{
fieldLabel:"具体住址",
width:415
}
]
},
{
layout:"column",
baseCls:"x-plain",
style:"padding:2px,8px,8px,8px",
items:
[
{
columnWidth:.4,
layout:"form",
baseCls:"x-plain",
labelWidth:70,
items:
[
{
xtype:"combo",
readOnly:true,
mode:"local",
triggerAction:"all",
displayField:"position",
width:100,
fieldLabel:"职称",
value:"初级程序员",
store:new Ext.data.SimpleStore
(
{
fields:["position"],
data:[["中级程序员"],["高级程序员"],["项目经理"]]
}
)
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"添加职位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt
(
"添加职位",
"请输入将要添加的职位内容",
function(_btn,_text)
{
if(_btn == "ok")
{
var _store = this.store ;
_store.insert(0,new myPosition({position:_text})) ;
this.setValue(_text) ;
}
}, _position //用来代替前面function()中的this对象
);
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"修改职位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.prompt(
"修改职位(绝不裸奔)",
"请输入你将要修改的内容:",
function(_btn,_text)
{
if(_btn == "ok")
{
this.setValue(_text) ;
}
},
_position,
false,
_position.getValue()
) ;
}
}
]
},
{
columnWidth:.2,
layout:"form",
baseCls:"x-plain",
items:
[
{
xtype:"button",
text:"删除职位",
handler:function()
{
var _window = this.ownerCt.ownerCt.ownerCt ;
var _position = _window.findByType("combo")[1] ;
Ext.Msg.confirm
(
"警告(thtwinj2ee)",
"你真的要删除该项内容吗?",
function(_btn)
{
if(_btn == "yes")
{
this.store.remove(this["selectItem"]) ;
if(this.store.getCount() != 0)
{
this.setValue(this.store.getAt(0).get("position")) ;
this["selectItem"] = this.store.getAt(0).get("position") ;
}
}
},
_position
) ;
}
}
]
}
]
}
],
listeners:
{
"show":function(_window)
{
_window.findByType("textfield")[5].getEl().dom.src = "02.jpg" ;
}
},
buttons:
[
{
text:"确定"
},
{
text:"取消"
}
]
}).show() ;
}) ;
</script>

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
js实现点赞按钮功能的实例代码
Mar 06 Javascript
javascript得到XML某节点的子节点个数的脚本
Oct 11 #Javascript
Javascript中Eval函数的使用说明
Oct 11 #Javascript
JavaScript更改class和id的方法
Oct 10 #Javascript
ppk谈JavaScript style属性
Oct 10 #Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 #Javascript
执行iframe中的javascript方法
Oct 07 #Javascript
JS版网站风格切换实例代码
Oct 06 #Javascript
You might like
音乐朗读剧《MARS RED》2021年TV动画化决定!
2020/03/06 日漫
PHP中使用unset销毁变量并内存释放问题
2012/07/05 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Django异步任务线程池实现原理
2019/12/17 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
优秀毕业大学生推荐信
2013/11/13 职场文书
销售文员岗位职责
2013/11/29 职场文书
中学门卫岗位职责
2013/12/26 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
本科毕业生求职信
2014/06/15 职场文书
供电工程专业求职信
2014/08/09 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
项目备案申请报告
2015/05/15 职场文书
常住证明范本
2015/06/23 职场文书