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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
javaScript语法总结
Nov 25 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python实现用户管理系统
2018/01/10 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python实现两个文件夹的同步
2019/08/29 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
一套PHP的笔试题
2013/05/31 面试题
经理秘书找工作求职信
2013/12/19 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
服装促销活动方案
2014/02/23 职场文书
保密工作实施方案
2014/02/24 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
李强优秀员工观后感
2015/06/16 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技