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 表单进行客户端验证demo
Aug 24 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
新手简单了解vue
May 29 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JS常用知识点整理
2017/01/21 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python写日志封装类实例
2015/06/28 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
详解python数据结构和算法
2019/04/18 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Python远程方法调用实现过程解析
2020/07/28 Python
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
三万活动总结
2014/04/28 职场文书
化学工程专业求职信
2014/08/10 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
罗马假日观后感
2015/06/08 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
代码解析React中setState同步和异步问题
2021/06/03 Javascript
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers