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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 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中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
JavaScript引用类型Function实例详解
2018/08/09 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
2018/09/26 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
2019/06/18 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
建筑工程自我鉴定
2013/10/18 职场文书
高二英语教学反思
2014/01/19 职场文书
小组合作学习反思
2014/02/18 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
1000字打架检讨书
2014/11/03 职场文书
婚庆答谢词
2015/01/04 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
会议主持词通用版
2019/04/02 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书