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 callBack 返回前一页的js方法
Nov 30 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
jquery ajax 如何向jsp提交表单数据
Aug 23 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
js转换对象为xml
Feb 17 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
hammer.js实现图片手势放大效果
Aug 29 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 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
PHP下10件你也许并不了解的事情
2008/09/11 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
PHP eval函数使用介绍
2013/12/08 PHP
ini_set的用法介绍
2014/01/07 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php数组合并的二种方法
2014/03/21 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
Vue实现拖放排序功能的实例代码
2019/07/08 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
java判断三位数的实例讲解
2019/06/10 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
JPA面试常见问题
2016/11/14 面试题
年度献血先进个人事迹材料
2014/02/14 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
投资意向协议书
2015/01/29 职场文书
武当山导游词
2015/02/03 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书