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组件使用中遇到的问题整理及解决
Feb 21 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
jquery表单验证插件validation使用方法详解
Jan 20 Javascript
jquery PrintArea 实现票据的套打功能(代码)
Mar 17 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
js实现抽奖功能
Nov 24 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 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
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
js中判断控件是否存在
2010/08/25 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
2013/10/15 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python中List.count()方法的使用教程
2015/05/20 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
Python读取mat文件,并转为csv文件的实例
2018/07/04 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
百度JavaScript笔试题
2015/01/15 面试题
机关单位动员会主持词
2014/03/20 职场文书
继承公证书
2014/04/09 职场文书
宣传标语大全
2014/07/01 职场文书
创业计划书介绍
2019/04/24 职场文书
MySQL CHAR和VARCHAR该如何选择
2021/05/31 MySQL
MongoDB使用场景总结
2022/02/24 MongoDB
win sever 2022如何占用操作主机角色
2022/06/25 Servers