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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
javascript 兼容鼠标滚轮事件
Apr 07 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
JQuery伸缩导航练习示例
Nov 13 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
js判断上传文件后缀名是否合法
Jan 28 Javascript
angular2使用简单介绍
Mar 01 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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实现12306余票查询、价格查询示例
2014/04/17 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
浅析python的优势和不足之处
2018/11/20 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
一套C#面试题
2013/10/09 面试题
执法作风整顿剖析材料
2014/10/11 职场文书
市场部经理岗位职责
2015/02/02 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript