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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
vant 中van-list的用法说明
Nov 11 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
浅谈PHP语法(1)
2006/10/09 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
2011/12/31 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
小程序实现搜索框
2020/06/19 Javascript
js实现聊天对话框
2020/02/08 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python创建线程示例
2014/05/06 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
python创建学生成绩管理系统
2019/11/22 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
活动经费申请报告
2015/05/15 职场文书
小学运动会前导词
2015/07/20 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
Python实现文字pdf转换图片pdf效果
2022/04/03 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python