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高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
理解jQuery stop()方法
Nov 21 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
纯js实现画一棵树的示例
Sep 05 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
解析PHP中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php发送post请求函数分享
2014/03/06 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
JS如何监听div的resize事件详解
2020/12/03 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python双向循环链表实现方法分析
2018/07/30 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
对python自动生成接口测试的示例讲解
2018/11/30 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
秋季校运动会广播稿
2014/02/23 职场文书
2014年元旦感言
2014/03/06 职场文书
保护环境倡议书范文
2014/05/13 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
公司年会策划方案
2014/05/17 职场文书
毕业生工作求职信
2014/06/30 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
离职证明格式样本
2015/06/12 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书