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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
jQuery timers计时器简单应用说明
Oct 28 Javascript
js跳转页面方法总结
Jan 29 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue实现简单全选和反选功能
Sep 15 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
用ODBC的分页显示
2006/10/09 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
详解javascript高级定时器
2015/12/31 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Python 条件判断的缩写方法
2008/09/06 Python
Python脚本实现网卡流量监控
2015/02/14 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python多进程fork()函数详解
2019/02/22 Python
python中time库的实例使用方法
2019/10/31 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
解决redis批量删除key值的问题
2022/03/23 Redis
Python数据处理的三个实用技巧分享
2022/04/01 Python