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 相关文章推荐
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
vue中添加与删除关键字搜索功能
Oct 12 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 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 VS ASP
2006/10/09 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
2016/03/14 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
vue h5移动端禁止缩放代码
2019/10/28 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python使用chardet判断字符串编码的方法
2015/03/13 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
Python实现的弹球小游戏示例
2017/08/01 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
自我鉴定三原则
2014/01/13 职场文书
开学寄语大全
2014/04/08 职场文书
取保候审保证书
2014/04/30 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
教师节活动总结
2014/08/29 职场文书
长城的导游词
2015/01/30 职场文书
华山导游词
2015/02/03 职场文书