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动态加载js三种方法实例
Aug 03 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
js解决movebox移动问题
Mar 29 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Apr 20 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
详解vue中在父组件点击按钮触发子组件的事件
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
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
js查错流程归纳
2012/05/04 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery自定义动画函数实例详解(附demo源码)
2015/12/10 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
详解Python中的__init__和__new__
2014/03/12 Python
python实现得到一个给定类的虚函数
2014/09/28 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python中下划线的使用方法
2015/03/27 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
自行车租赁公司创业计划书
2014/01/28 职场文书
聘用意向书范本
2014/04/01 职场文书
个人授权委托书范本
2014/09/14 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
导游词之潮音寺
2019/09/26 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python